ReactJS：让函数同时访问父子道具？答案

【问题标题】：ReactJS: Give Function Simultaneous Access to Parent and Child Props?ReactJS：让函数同时访问父子道具？
【发布时间】：2017-03-05 01:38:55
【问题描述】：

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

我已经想出了如何让函数分别访问父项和子项，但不能同时访问。

对于我使用的父母：

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

对于我使用的孩子：

//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>;
}

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

【问题讨论】：

我不知道您所说的“同时”是什么意思，但孩子无法访问父道具。您的示例令人困惑（您有 2 个父示例），我不确定您的预期行为是什么......
孩子永远不会访问父道具。我正在父类中为 onClick 创建一个函数，该函数传递给子类。我希望这个函数可以同时访问父属性和子属性。
我没有 2 个父示例。在第一个示例中，函数 (clickHandler) 可以访问父道具。在第二个示例中，函数可以以函数参数的形式访问孩子的道具。我们的想法是能够在采样时实现这两者，以便该函数可以接收来自子级的道具作为参数并使用父级的道具做一些事情。
您在两个地方有 "in parent class" 和 3 个渲染函数和空处理程序，所以我不清楚您要做什么。尝试发布MCVE。

标签： javascript reactjs onclick

【解决方案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>;
}

【讨论】：