如何通过反应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> 
    } 
});