reactjs如何实现切换效果？答案

【问题标题】：How to implement a toggle effect with react js?reactjs如何实现切换效果？
【发布时间】：2015-10-18 12:59:36
【问题描述】：

我在谷歌搜索了很长时间。但我什么也没找到。我正在寻找一种使用 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>
                );
            }
        });

【问题讨论】：

this.state.show 代表所有 3 个带有 demo 类的 div 的状态？
没有@elio.d。只有当我点击时，目标元素子元素才会打开。

标签： javascript html reactjs

【解决方案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>
  }
});

【讨论】：

当多个<DemoItem />s 只显示一个<DemoSub /> 时，您将如何推进它，以便当我单击其中一个时，演示子框会相应地更改内容？

【解决方案2】：

import React, { Component } from 'react';  

class Person extends Component {

   state={
        showPerson:false,
    }

toggleName=()=>{
    const doesShow = this.state.showPerson;
    this.setState({
        showPerson:!doesShow
    })
}

render() {

    let personList = null;
if(this.state.showPerson) {
    personList = (
        <div> Show Content </div>
    )
}
    return (
        <div>
             <button onClick={this.toggleName}>Switch</button>
             {personList}
        </div>
    );
}
}

export default Person;

【讨论】：

欢迎来到 Stackoverflow。请在您的回答中提供一些说明，以便其他人容易理解。