react實現的tab切換組件

標籤：

我有點想要吐槽，因為用原生的js實現起來挺簡單的一個小東西，改用react來寫卻花了我不少時間，也許react的寫法只有在複雜的web應用中才能體現出它的優勢吧！不過吐槽歸吐槽，對react這種優雅的代碼的寫法我自己是很喜歡的啊！來簡單的講一下，希望能對react的初學者有一些協助...

：

組建的編寫用了一些es6的文法，用webpack作為轉譯打包工具。

把核心代碼貼上來下...

var React=require("react");var ReactDOM=require("react-dom");require("../css/style.css");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="first">                        我是第一幀                    </div>                    <div name="second">                        我是第二幀                    </div>                    <div name="third">                        我是第三幀                    </div>                </TabsControl>            </div>            );    }}ReactDOM.render(<TabComponent/>,document.getElementById("app"));

總體的思路是這樣的：

在<TabComponent/>組件中</TabsControl>組件包含著主要內容地區=>任意數量的div，在</TabsControl>組件中通過this.props.children擷取到這些div，並且動態產生相應數量的Tab_tittle，再對標題區和內容區設定合適的className，以控制標題區的顏色切換和內容地區的顯示和隱藏，</TabsControl>中通過state設定index來記憶被點擊的地區，並且每一個標題區都有綁定一個click處理方法，每一次點擊都會重新設定state的index值，組件會自動調用this.render方法重新渲染視圖，上面說到的className的設定規則也是藉由index值來實現的=>當標題區或者內容地區其對應的索引值與state中的index相同的時候，給它們添加具有特殊的即動態標示的className。至於標題區和內容地區它們所具有的索引值則是藉助於this.props.children的React.Children.map（）方法來添加的...

/*代碼*/

* onClick={ () => { ,使用es6的箭頭函數的話，在這裡this就不再是onclick的觸發對象了，而是指向了其所在的組件，因為箭頭函數沒有自己的this，這裡的this繼承自外圍範圍，即組件本身。

* 像

                <TabsControl>                    <div name="first">                        我是第一幀                    </div>                    <div name="second">                        我是第二幀                    </div>                    <div name="third">                        我是第三幀                    </div>                </TabsControl>        

 

則在<TabsControl>組件中使用this.props.children可以擷取到一個包含三個div的數組，如果在這裡只包含一個div的話，擷取到的則是一個對象，react提供了React.Children.map（）這樣的方法來實現方便的對擷取到的數組進行操作。

 

/*總結*/

react很好，我很喜歡，寫出來的代碼也很好看，不會像原生的js代碼那樣看起來很鬆散，而且我想react也是大勢所趨吧，所以追隨著react繼續走下去是不會錯的吧！

react實現的tab切換組件