如何通過反應js實現切換效果？

Question

我一直在谷歌搜索很長一段時間。但我沒有找到任何東西。我正在尋找一種方法來與reactjs實現切換效果。 請看下面我的代碼。

var Demo = React.createClass({ 
      getInitialState:function(){ 
       return {show:false}; 
      }, 
      onClick:function(){ 
       this.setState({show:true}); 
      }, 
      render: function(){ 
       return (
        <div> 
         <div className="demo" onClick={this.onClick}> 
          Demo 
          {this.state.show?<Demosub />:null} 
         </div> 
         <div className="demo" onClick={this.onClick}> 
          Demo 
          {this.state.show?<Demosub />:null} 
         </div> 
         <div className="demo" onClick={this.onClick}> 
          Demo 
          {this.state.show?<Demosub />:null} 
         </div> 
        </div> 
       ); 
      } 
     }); 

     var Demosub = React.createClass({ 
      render: function(){ 
       return (
        <div>Demo sub</div> 
       ); 
      } 
     }); 

Answer 1

我會像它自己的組件封裝的每個項目：

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

var DemoItem = React.createClass({ 
    getInitialState: function() { 
    return { show: false }; 
    }, 
    toggleShow: function() { 
    this.setState({ show: !this.state.show }); 
    }, 
    render: function() { 
    return (
     <div className="demo" onClick={this.toggleShow}> 
     Demo 
     {this.state.show ? <DemoSub /> : null} 
     </div> 
    ); 
    } 
}); 

var DemoSub = React.createClass({ 
    render: function() { 
    return <div>Demo sub</div> 
    } 
});