我了解如何在 React 中将单击事件从父组件传递到子组件,但不明白如何将其从祖组件传递到孙组件而不使父组件可单击。
在下面的示例中,我希望父级 div 在单击孙级 div 时关闭。
这是我的代码,它不起作用。谢谢!
var Grandparent = React.createClass({
getInitialState: function() {
return {open: true};
},
close: function() {
this.setState({open: false});
},
render() {
var grandparentBox={backgroundColor: 'yellow', height: 400, width: 400};
return <div style = {grandparentBox}><Parent open={this.state.open} close = {this.close}/></div>;
}
});
var Parent = React.createClass({
render() {
var parentBox={backgroundColor: 'red', height: 100, width: 100};
if (this.props.open == true) {
return <div close={this.props.close} style = {parentBox}><Grandchild/></div>
}
else {
return null;
}
}
});
var Grandchild = React.createClass({
render() {
var grandchildBox={backgroundColor: 'black', height: 20, width: 20, top: 0};
return <div onClick={this.props.close} style = {grandchildBox}></div>
}
});
ReactDOM.render(
<Grandparent/>,
document.getElementById('container')
);
最佳答案
看起来您需要将 close 方法作为 prop 传递给 Grandchild 组件(而不是包装它的 div)。事实上,Grandchild 没有方法 this.props.close...
var Parent = React.createClass({
render() {
var parentBoxStyle = {backgroundColor: 'red', height: 100, width: 100};
if (this.props.open == true) {
return <div style={parentBoxStyle}>
<Grandchild close={this.props.close} />
</div>
}
else {
return null;
}
}
});
关于reactjs - 在 Reactjs 中将事件处理程序从祖 parent 传递到孙子组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39255641/