Question

我使用连接的组件作为传递给父组件的道具，但我无法从connect（）甚至组件内部的函数定义中获取任何道具。

我试图在render（）中定义props函数，但仍然无法正常工作

import React from 'react';
import PropTypes from 'prop-types';
import {Col,Row} from 'antd'
import injectSheet from 'react-jss';

class SubComponent extends React.Component{
    constructor(props){
        super(props);

    }
    picClicked=()=>{
        console.log("cause state!");
        console.log(this.props.picClicked);// output undefined
        this.props.picClicked;
    }
    render(){

        const {picClicked,classes} = this.props;// classes is from react-jss

        console.log(this.props);// only classes is shown from the console log
        return(
            <div>
                <div onClick={this.picClicked} className={classes.headBlank}>
                </div>
            </div>
        )
}
SubComponent.propTypes={
    picClicked:PropTypes.func.isRequired
};
export default injectSheet(logoStyle)(SubComponent)

然后该容器如下所示：

const mdtp = (dispatch)=>{
    return{
        picClicked:()=>{console.log("picClicked!");}
    };
};

export default connect(null,mdtp)(SubComponent);

然后，子组件将在另一个父组件中用作道具：

ReactDOM.render(
        <Provider store={storeMainContents}>
            <ParentComponent  contentsShow={<SubComponent />} />
        </Provider>
        ,document.getElementById("parentComponent")

);

父组件如下所示：

render(){

        const {contentsShow,classes}=this.props;

        return(
            <div>
                <div>
                    {this.props.contentsShow}

                </div>
            </div>
            );
    }

我期望SubComponent可以访问诸如picClicked之类的道具，作为可以调度或至少可以访问的动作。现在，它只是未定义。

嵌套组件无法通过连接获取道具

0 个答案: