兄弟姐妹組件之間的通信

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