在 Reactjs 中将事件处理程序从祖父母传递到孙子组件

Question

我了解如何在 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')
);

Answer 1

看起来您需要将 close 方法作为 prop 传递给 Grandchild 组件（而不是包装它的 div）。事实上，孙子没有方法 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;
        }
    }
});