Javascript ReactJS:让函数同时访问父道具和子道具?
我正在ReactJS中的一个项目中工作,我希望父类能够在render()函数中将onClick事件传递给它的子组件之一,并使onClick事件能够访问父组件和子组件的道具 我已经知道如何让函数分别访问父级和子级,但不能同时访问 对于家长,我使用: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
//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个渲染函数和空处理程序,所以我不清楚您想做什么。试着发一封信。