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

为了让您的孩子修改其父级状态，您应该从父级向子级传递一个闭包（一种可以访问另一个范围的方法）。请注意，您所谓的父母＆＃34;不是真正的父母（：＆＃39;（），而是你孩子组成部分的兄弟姐妹。只有祖父母才有内在成分。

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!

坚持儿童组件与父母Reactjs沟通

1 个答案: