卡在与父 Reactjs 通信的子组件上

Question

我超级卡在某事上。虽然我了解父母如何将道具传递给孩子，但我不知道如何使用孩子与父母、祖父母等进行交流。

基本上，我有一个子组件，它是一个嵌套组件，我想让它在单击此子组件时，另一个子组件与父组件呈现在同一级别。

这是我的代码...

var Grandparent = React.createClass({
    getInitialState: function() {
    return {closed: true};
  },
  checkMenuState: function() {
    if (this.state.closed == true) {
        return;
    }
    else {
        return <Child/>;
    }
  },
  handleState: function() {
    this.setState({closed: false});
    {this.checkMenuState}
  },
    render: function() {
    return <div><Parent/>{this.checkMenuState()}<OtherChild onClick={this.handleState}/></div>
  }
})

var Parent = React.createClass({
  render: function() {
    var parentSquare={backgroundColor: 'blue', height: 400, width: 400};
    return <div style={parentSquare}></div>;
  }
});

var Child = React.createClass({
    render: function() {
    var childSquare={backgroundColor: 'orange', height: 100, width: 100, top: 0, position: 'absolute'};
        return <div style={childSquare} closed={this.props.closed}></div>
  }
});

var OtherChild = React.createClass({
    render: function() {
    var childSquare={backgroundColor: 'yellow', height: 100, width: 100, top: 100, position: 'absolute'};
        return <div style={childSquare}></div>
  }
});

ReactDOM.render(
  <Grandparent/>,
  document.getElementById('container')
);

所以在初始渲染时，页面应该如下所示：

然后，一旦黄色的 div 被点击，它应该是这样的：

截至目前，当我点击时什么都没有发生。这是我的 JSFiddle 的链接： JSFiddle

Answer 1

为了允许您的孩子修改其父母的状态，您应该将一个闭包（一种可以访问另一个范围的方法）从父母传递给孩子。请注意，您所谓的“父母”不是真正的父母（ :'( ），而是您的子组件的兄弟姐妹。只有祖父母有内部组件。

var Grandparent = React.createClass({
  getInitialState: function() {
    return { showChild: false }
  },


  displayChild: function() {
    this.setState({ showChild: true })
  },

  render: function() {
    return <div>
      <Parent />
      { this.state.showChild ? <Child /> : undefined }
      <OtherChild onClick={ this.displayChild } />
    </div>
  }
})

var Parent = React.createClass({
  render: function() {
    var parentSquare = {
      backgroundColor: 'blue',
      height: 400,
      width: 400
    }

    return <div style={ parentSquare }></div>
  }
})

var Child = React.createClass({
  render: function() {
    var childSquare = {
      backgroundColor: 'orange',
      height: 100,
      width: 100,
      top: 0,
      position: 'absolute'
    }

    return <div style={ childSquare }></div>
  }
})

var OtherChild = React.createClass({
  render: function() {
    var childSquare = {
      backgroundColor: 'yellow',
      height: 100,
      width: 100,
      top: 100,
      position: 'absolute'
    }

    return <div style={ childSquare } onClick={ this.props.onClick }></div>
  }
})

ReactDOM.render(
  <Grandparent/>,
  document.getElementById('container')
)

Give it a try!