React 如何优雅地实现标签页切换？

想用 react 实现类似 bootstrap 的标签页，如何才能优雅地实现呢？

---

应该用state切换就可以了

---

用state切换显示不行么？

---

之前刚接触到react，用state是可以的，不过页面结构复杂的话，用state还是很复杂！说白了，其实就是react组件之间的通信问题。之前自己在网上找了一个事件系统，可以解决这个问题。后来接触到类似reflux，觉得还是不错的，现在redux也是很火的。

---

你可以使用ant.design这个框架。省事。

---

不负责任的理解

bootstrap相对reactjs来说是内容而后者是框架。reactjs官方下载包里example里有和bootstrap整合的例子,所以两者不是竞争关系

-所以问题由：
想用 react 实现类似 bootstrap 的标签页，如何才能优雅地实现呢？
-改为：
想用 react 和 bootstrap 实现标签页，如何才能优(mian)雅(qiang)地实现呢？

乱写的代码

'use strict';

var data = [{no:0,name:"Home",active:"",href:"#"},{no:1,name:"Profile",active:"",href:"#"},{no:2,name:"Messages",active:"",href:"#"}];

//Bootstrap标签项
var BootstrapNavLi = React.createClass({
  handleClick:function(){
    data=[{no:0,name:"Home",active:"",href:"#"},{no:1,name:"Profile",active:"",href:"#"},{no:2,name:"Messages",active:"",href:"#"}];
    data.splice(this.props.no,1);  //删除指定位置指定个数的元素
    data.splice(this.props.no,0,{name:this.props.name,active:"active",href:"#"});  //插入元素
  },
  render:function(){
    return(
       <li onClick={this.handleClick} role="presentation" className={this.props.active}>
         <a href={this.props.href}>
          {this.props.name}
         </a>
       </li>
      ); 
  }
});

//Bootstrap标签页
var BootstrapNav = React.createClass({
  getInitialState: function() {
     return {data: data};
  },
  hClick:function(){  //初始化
      this.setState({data:data});
  },
  render: function(){
    var lis = this.state.data.map(function(li,index){
      return <BootstrapNavLi href={li.href} name={li.name} active={li.active} no={li.no} key={index} />
    });
    return (
        <ul onClick={this.hClick} className={this.props.className}>
          {lis}
        </ul>
      );
  }
});

//外层div，包含标题
var Box = React.createClass({
  render: function() {
    return (
      <div className="NavExample">
        <h1>React Bootstrap 标签页切换实例</h1>
        <BootstrapNav className="nav nav-pills nav-justified"/>
      </div>
    );
  }

});


React.render(<Box></Box>, document.getElementById('example'));

效果