Reactjs 同级组件之间的通信

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

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

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')
);

var FirstChild=React.createClass({
render:function（）
{
返回(
第一成分子代
点击
)
}
});
var First=React.createClass({
render:function（）
{
返回(
第一部分
)
}
});
var Second=React.createClass({
render:function（）
{
返回(
第二部分
{this.props.isShow？Show:null}
)
}
});
var ParentComponent=React.createClass({
getInitialState:函数（）
{
返回{
伊莎：错
}
},
ClickEvent:函数（）
{
警报（“点击”）；
this.setState（{isShow:true}）；
},
render:function（）
{
返回(
)
}
});
反应(
,
document.getElementById（'示例'）
);

---

是的，这应该可以。但可能我还不够清楚：一个元素是NavBar，另一个是List，List包含一个组件ListItem，它为数据库中的每个项生成一个ListItem。现在我给了所有这些项目一个复选框，我想使用这个复选框作为导航栏右侧图标的切换。如果未勾选复选框=>隐藏图标导航栏；否则就展示出来。