react做tab切换的几种方式

最近搞一个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 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 一次就可以了。

当然,我那个傻瓜式的方式也挺好的。哈哈,任君喜欢

如果您觉得文章有用,也可以给咸鱼老弟发个微信小额红包鼓励鼓励,哈哈

时间: 2024-10-05 04:26:42

react做tab切换的几种方式的相关文章

react之传递数据的几种方式props传值、路由传值、状态提升、redux、context

react之传递数据的几种方式 1.父子传值 父传值:<子的标签 value={'aaa'} index={'bbb'}></子的标签> 子接值:<li key={this.props.index}>{this.props.value}</li> 不止可以传值也可以传递方法: 父:方法={this.方法} 子:{this.props.方法.bind(this)} 传来的参数子组件可以使用,此处用{value,index}等解构赋值省去this.props 此

【百度地图API】关于如何进行城市切换的三种方式

原文:[百度地图API]关于如何进行城市切换的三种方式 摘要:本文介绍了三种切换城市的方式:查询城市.城市列表和显示城市轮廓. --------------------------------------------------------------------- 很多API爱好者问到我,如何像百度地图那样,实现各个城市之间的切换呢? 在这里,公布以下三种方式. 第一种,是查询城市的方法.使用API接口的LocalSearch方法.我之前写过完整的文章,请查看: http://www.cnbl

js实现选项卡切换的三种方式

前两种主要实现一个选项卡的切换,第三种使用闭包看书,构造函数实现多个选项卡的切换: 1.第一种实现实现效果为: 实现代码为: <!doctype html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>tab切换</title> <style type="text/css

实现选项卡切换的三种方式

首先我用Jquery库实现了一个简单的效果, 只需要点击上面的导航标签即可切换下方内容,Html代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>tab切换</title> <style type="text/css"> *{padding:0;margin:0;f

React Native创建组件的三种方式

创建组件的三种方式 1.ES6创建组件的方式 export default class HelloComponent extends Component{ render(){ return <Text style={{color: 'red'}}>Hello</Text> } } 2.ES5创建组件的方式 var HelloComponent = React.createClass({ render(){ return <Text style={{color: 'red'}}

论tab切换的几种实现方法

tab切换在网页中很常见,故最近总结了3中实现方法. 首先,写出tab的框架,加上最简单的样式,代码如下: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <style> 6 *{ 7 padding: 0; 8 margin: 0; 9

CSS实现导航条Tab切换的三种方法

前面的话 ??导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局 ??根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布局效果,有两种布局方法:语义布局和视觉布局 [语义布局] ??从语义布局的角度来看,每一个导航标题和其对应的导航内容应该是一个整体 <style> body,p{margin: 0;} h2{margin: 0;font-size:100%;} ul{margin: 0;padding: 0;li

UIViewContrller之间切换的几种方式

转自:http://blog.csdn.net/likendsl/article/details/7542296 1.UIViewContrller之间的切换有三种方式: 一.UIViewController自身之间的调用:[self presentModalViewController:UIViewController animated:YES];对应的返回操作函数:[self dismissModalViewControllerAnimated:YES];这里的self代表的是UIViewC

dataguard dg切换的两种方式

主备库的切换主要在两种情况下切换,Switchover和Failover,这两种切换都需要手工执行完成. 一是Switchover(计划中的切换,不会丢失数据) 二是Failover(当主库出现故障的时候需要主备库切换角色) 1,Switchover的切换方法 主库端: select switchover_status from v$database; 如果是to standby表可以正常切换. 直接执行alter database commit to switchover to physica