Question

我有2个组件：第一个组件和第二个组件，它们本身是组件父级的子组件，第一个组件有一个子组件的 FIRST_CHILD 即可。现在我想根据是否点击了 first_child 中的元素来更新（显示/隐藏）第二个组件。

Answer 1

您可以使用下面提到的代码

var FirstChild=React.createClass({
  render:function()
  {
    return(
      <div>
      <h1>First Component Child</h1>
       <button onClick={this.props.Click} >Click</button>
      </div>

      )
  }
});
var First=React.createClass({
  render:function()
  {
    return(
      <div>
      <h1>First Component</h1>
      <FirstChild Click={this.props.click}/>
      </div>

      )
  }
});
var Second=React.createClass({
  render:function()
  {
    return(
      <div>

       <h1>Second Component</h1>
       {this.props.isShow?<h1>Show</h1>:null}
      </div>

      )
  }
});

var ParentComponent=React.createClass({
  getInitialState:function()
  {
    return{
      isShow:false
    }
  },
  ClickEvent:function()
  {
    alert('clicked');
    this.setState({isShow:true});
  },
  render:function()
  {
    return(
      <div>
      <First click={this.ClickEvent} />
      <Second isShow={this.state.isShow}/>
      </div>

      )
  }
});
React.render(
  <ParentComponent />,
  document.getElementById('example')
);

Demo

兄弟姐妹组成部分之间的沟通

1 个答案: