原 react做tab切換的幾種方式

最近搞乙個pc端的活動，搞了乙個多月，甚煩，因為相比於pc端，更喜歡移動端多一點。因為移動端又能搞我的react了.

今天主要總結一下react當中tab切換的幾種方式，因為tab切換基本上都會用到。當然，你也可以在react當中用jquery或者zepto來實現，不過既然都用react了，能不能用jq,就盡量不用jq。不過不得不吐槽一下，在jquery很簡單的東西，在react中稍微複雜化了一點。

目前我用到的tab切換只有兩種方式，所以暫時總結這兩種，以後有遇到其他的再總結。

第一種、只是子標籤在換，內容的布局不換。類似於下面這種

這類的切換只需要點選上面的標籤，傳送不同的請求而已，下面內容的布局都是一樣的。

第二種就是標籤頁和內容都需要切換的，也是比較常見的這種。如下

talk is cheap. show me the code (覺得比較有意思的翻譯是：廢話少說，放碼過來)

import react from 'react';
class newslist extends react.component ,,,
],currentindex:1,
};} 
componentdidmount() 
tabchoiced=(id)=>);
}render() classname=>
}.bind(_this));
return
( 
) }
}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 ,,,
],currentindex:1,
};} 
componentdidmount() 
tabchoiced=(id)=>);
}render() classname=>
}.bind(_this));
return
( 
社會新聞
體育世界
娛樂圈) }
}export 
default newslist;

雖然這種方法比較傻瓜式，不過很方便。在第乙個**的的基礎上稍加改進。判斷當前的currenindex等於幾，如果是1，那麼內容頁的第乙個的display就設為block,　其他內容頁的display為noe。以此類推。哈哈，確實有點點傻瓜式。管它呢，好用就好。

方法2：做成乙個元件的形式，也可以說是寫乙個小小的外掛程式

還是廢話少說，放碼過來

var react=require("react");

var reactdom=require("react-dom");

class tabscontrol extends react.component;

}check_tittle_index(index)

check_item_index(index)

render()

) } } classname=>

); }) }

); })}

); }

}class tabcomponent extends react.component

}reactdom.render(

這個稍微複雜一點，稍加解釋，不過如果你看懂了前面兩個的例子，很很好懂。

首先我們定義了乙個子元件叫tabscontrol ，然後我們遍歷它的子標籤。子標籤的內容從**來呢，是在該元件裡面的name值那裡獲取。

this.props.children是react內建的乙個屬性，用來獲取元件的子元素。因為子元素有可能是object或者array，

所以react提供了一些處理children的輔助方法用來遍歷：react.children.map。

比如上面這段**中，this.props.children獲取了裡面三個divd陣列，但是假如你只要乙個div呢，那麼獲取的就是物件。所以需要

react.children.map（）來配合進行遍歷。

通過上面的這段**，我們就很方便的進行遍歷了。比如乙個頁面需要有多個tab切換，那麼我們只需要引入這個tabscontrol 一次就可以了。

當然，我那個傻瓜式的方式也挺好的。哈哈，任君喜歡

原 react做tab切換的幾種方式

很好用的Tab標籤切換功能，延遲Tab切換。

React中tab欄的實現

能套用的tab欄切換

原 react做tab切換的幾種方式

很好用的Tab標籤切換功能，延遲Tab切換。

React中tab欄的實現

能套用的tab欄切換

相關推薦