兄弟姐妹组件之间的通信

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