最近搞一个pc端的活动,搞了一个多月,甚烦,因为相比于pc端,更喜欢移动端多一点。因为移动端又能搞我的react了.
今天主要总结一下react当中tab切换的几种方式,因为tab切换基本上都会用到。当然,你也可以在react当中用jquery或者zepto来实现,不过既然都用react了,能不能用jq,就尽量不用jq。不过不得不吐槽一下,在jquery很简单的东西,在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