react点击切换则见_【原】react做tab切换的几种方式

 
Talk is cheap. Show me the code     (觉得比较有意思的翻译是：废话少说，放码过来)
 

第一种，只是tab标签切换的方式
 

import React from 'react';  
class NewsList extends React.Component {
      constructor(props) {
         super(props);
         this.state = {
             tabs:[
                 {tabName:"热点新闻",id:1},
                 {tabName:"合作播报",id:2},
                 {tabName:"行业咨询",id:3},
                 {tabName:"运营攻略",id:4}
             ],
             currentIndex:1,
         };
     }
     componentDidMount() {}
     tabChoiced=(id)=>{
         // tab切换的方法 this.setState({
             currentIndex:id
         });
     }
     render(){
         var _this=this;
           var tabList= this.state.tabs.map(function(res,index) {
               // 遍历标签页，如果标签的id等于tabid，
               //那么该标签就加多一个active的className var tabStyle=res.id==this.state.currentIndex ? 'subCtrl active' : 'subCtrl';
              return
              <li key={index} 
                  onClick={this.tabChoiced.bind(_this,res.id)}
                  className={tabStyle}
              > 
               {res.tabName}
              </li>
          }.bind(_this));
         return (
             <div className="listWrap">
                 <ul className="subNavWrap">
                     {tabList}
                 </ul>
                 <div className="newsList">
                     {/**这里通用的新闻列表**/}
                 </div>
             </div>
         )
     } }
  export default NewsList;

首先我们初始化已给tab标签的数组，并给数组里面的每一项加个id，然后设置一个当前显示第几个的currendIndex.然后将标签遍历出来，如果该标签的id等于currendIndex，那么就加多一个active的className,否则没有。从而实现点击标签，显示高亮的状态
　　每次点击新的标签，都会将该标签对应的id传过去，从而让currendIndex等于被点击的标签的id。比如点击了id为2的标签，这样下次遍历的时候currendIndex也等于2了，从而让第二个处于高亮，从而实现tab的切换。第二种，内容随着标签一起切换
这个也是比较常见的。暂时我这里有两种方法实现。方法1：在前面只是标签切换形式上改进一下：

import React from 'react';
  class NewsList extends React.Component {
      constructor(props) {
         super(props);
         this.state = {
             tabs:[
                 {tabName:"社会新闻",id:1},
                 {tabName:"体育世界",id:2},
                 {tabName:"娱乐圈",id:3},
             ],
             currentIndex:1,
         };
     }
         componentDidMount() {              }
     tabChoiced=(id)=>{
         //tab切换到方法
        this.setState({
             currentIndex:id
         });
     }
     render(){
         var _this=this;
         var isBox1Show=this.state.currentIndex==1 ? 'block' : 'none';
         var isbox2Show=this.state.currentIndex==2 ? 'block' : 'none';
         var isbox3Show=this.state.currentIndex==3 ? 'block' : 'none';
            var tabList= this.state.tabs.map(function(res,index) {
               // 遍历标签页，如果标签的id等于tabid，那么该标签就加多一个active的className var tabStyle=res.id==this.state.currentIndex ? 'subCtrl active' : 'subCtrl';
              return
               <li key={index}
                  onClick={this.tabChoiced.bind(_this,res.id)}
                  className={tabStyle}
                >
                {res.tabName}
               </li>
          }.bind(_this));
         return (
             <div className="listWrap">
                 <ul className="subNavWrap">
                     {tabList}
                 </ul>
                 <div className="newsList">
                     <div style={{"display":isBox1Show}} >
                         社会新闻
                     </div>
                     <div style={{"display":isBox2Show}}>
                         体育世界
                     </div>
                     <div style={{"display":isBox3Show}}>
                         娱乐圈
                     </div>
                 </div>
             </div>
         )
     } }
  export default NewsList;

　虽然这种方法比较傻瓜式，不过很方便。在第一个代码的的基础上稍加改进。判断当前的currenIndex等于几，如果是1，那么内容页的第一个的display就设为block,　其他内容页的display为noe。以此类推。哈哈，确实有点点傻瓜式。管它呢，好用就好。方法2：做成一个组件的形式，也可以说是写一个小小的插件
还是废话少说，放码过来

var React=require("react");
 var ReactDOM=require("react-dom");
  class TabsControl extends React.Component{
      constructor(){
         super();
         this.state={
              currentIndex : 0
         };
     }
      check_tittle_index(index){
         return index===this.state.currentIndex ? "Tab_tittle active" : "Tab_tittle";
     }
      check_item_index(index){
         return index===this.state.currentIndex ? "Tab_item show" : "Tab_item";
     }
      render(){
         let _this=this;
         return(
             <div>
                 {/*动态生成Tab导航*/}
                 <div className="Tab_tittle_wrap">
                     { React.Children.map( this.props.children , (element,index) => {
                         return(
                             /*箭头函数没有自己的this，这里的this继承自外围作用域，即组件本身*/
                             <div
                                 onClick={ () => { this.setState({currentIndex : index}) } }
                                 className={ this.check_tittle_index(index) }
                             >
                               { element.props.name }
                             </div>
                             );
                     })
 }
                 </div>
                 {/*Tab内容区域*/}
                 <div className="Tab_item_wrap">
                     {React.Children.map(this.props.children,(element,index)=>{
                         return(
                             <div className={ this.check_item_index(index) }>{ element }</div>
                             );
                     })}
                 </div>
             </div>
             );
     } }
  class TabComponent extends React.Component{
      render(){
         return(
             <div className="container">
                 <TabsControl>
                     <div name="社会新闻">
                         社会新闻的内容
                     </div>
                     <div name="体育世界">
                         体育世界的内容
                     </div>
                     <div name="娱乐圈">
                         娱乐圈的内容
                     </div>
                 </TabsControl>
             </div>
             );
     } }
  ReactDOM.render(<TabComponent/>,document.getElementById("app"));

这个稍微复杂一点，稍加解释，不过如果你看懂了前面两个的例子，很很好懂。
首先我们定义了一个子组件叫TabsControl ，然后我们遍历它的子标签。子标签的内容从哪里来呢，是在该组件里面的name值那里获取。　　this.props.children 是React内建的一个属性，用来获取组件的子元素。因为子元素有可能是Object或者Array，
所以React提供了一些处理children的辅助方法用来遍历：React.Children.map。
　　比如上面这段代码中，this.props.children获取了里面三个divd数组，但是假如你只要一个div呢，那么获取的就是对象。所以需要
React.Children.map（）来配合进行遍历。
　　通过上面的这段代码，我们就很方便的进行遍历了。比如一个页面需要有多个tab切换，那么我们只需要引入这个TabsControl 一次就可以了。
当然，我那个傻瓜式的方式也挺好的。哈哈，任君喜欢