Javascript ReactJS:让函数同时访问父道具和子道具?

Javascript ReactJS:让函数同时访问父道具和子道具?,javascript,reactjs,onclick,Javascript,Reactjs,Onclick,我正在ReactJS中的一个项目中工作,我希望父类能够在render()函数中将onClick事件传递给它的子组件之一,并使onClick事件能够访问父组件和子组件的道具 我已经知道如何让函数分别访问父级和子级,但不能同时访问 对于家长,我使用: //in parent class clickHandler(){ //do something with this.props.etc } render(){ <myChild onClick={this.clickHandler.b

我正在ReactJS中的一个项目中工作,我希望父类能够在render()函数中将onClick事件传递给它的子组件之一,并使onClick事件能够访问父组件和子组件的道具

我已经知道如何让函数分别访问父级和子级,但不能同时访问

对于家长,我使用:

//in parent class
clickHandler(){
    //do something with this.props.etc 
}
render(){
<myChild onClick={this.clickHandler.bind(this)}/>
}
//在父类中
clickHandler(){
//用这个做点什么
}
render(){
}
对于儿童,我使用:

//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>;
}
//在父类中
clickHandler(状态、内容、e){
//对按钮状态和从子道具传递的内容执行某些操作
}
render(){
返回;
}
//儿童班
渲染{
const{onClick}=this.props;
const{status}=this.state;
返回onClick(status,this.props.content,e)}>单击我;
}
如何将两者结合起来,以便同时访问父母和孩子的道具?

我想你可能想得太多了-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>;
}
//在父类中
clickHandler(状态、内容、e){
//状态、内容是孩子传递的道具
控制台日志(状态);
控制台日志(内容);
//“this”仍然指父类,所以。。。
//a、b、c是来自父母的道具
常数{a,b,c}=this.props;
}
render(){
返回;
}
//儿童班
渲染{
const{onClick}=this.props;
const{status}=此.state;
返回onClick(status,this.props.content,e)}>单击我;
}

我不知道您所说的“同时”是什么意思,但孩子无法访问家长道具。你的例子令人困惑(你有两个家长的例子),我不确定你的预期行为是什么…孩子从不访问家长道具。我正在父类中为onClick创建一个函数,该函数被传递给子类。我希望这个函数可以同时访问父和子道具。我没有两个父示例。在第一个示例中,函数(clickHandler)可以访问父道具。在第二个示例中,函数可以以函数参数的形式访问子对象的道具。我们的想法是能够在采样时实现这两个功能,这样函数就可以从子函数接收作为参数的道具,并使用父函数的道具执行某些操作。父类中有两个位置的
“in parent class”
,还有3个渲染函数和空处理程序,所以我不清楚您想做什么。试着发一封信。