javascript - ReactJS:让函数同时访问父子 Prop ？

Question

我正在 ReactJS 中开发一个项目，我希望父类能够在 render() 函数中将 onClick 事件传递给它的子组件之一，并让该 onClick 事件能够访问 parent 和 child 的 Prop 。

我已经弄清楚如何让函数分别访问父项和子项，但不能同时访问。

对于我使用的 parent :

//in parent class
clickHandler(){
    //do something with this.props.etc 
}
render(){
<myChild onClick={this.clickHandler.bind(this)}/>
}

对于 child ，我使用:

//In parent class
clickHandler(status, content, e){
    //do something with button status and content passed from child props 
}
render(){
return <myChild onClick={this.clickHandler.bind(this)}/>;
}

//in child class
render{
const { onClick } = this.props;
const { status } = this.state;
return <button onClick={(e) => onClick(status, this.props.content, e)}>click me</button>;
}

如何将两者结合起来，以便同时访问父 prop 和子 prop？

Answer 1

我认为也许你想多了 - React 归根结底只是 javascript，因此，你可以这样做:

// In parent class
clickHandler(status, content, e) {
    // status, content are the props passed up from the child
    console.log(status);
    console.log(content);

    // "this" still refers to parent class, so...
    // a, b, c are from the parent props 
    const { a, b, c } = this.props;

}

render(){
    return <myChild onClick={this.clickHandler.bind(this)}/>;
}

// In child class
render {
    const { onClick } = this.props;
    const { status } = this.state;
    return <button onClick={(e) => onClick(status, this.props.content, e)}>click me</button>;
}