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

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

【原】react做tab切换的几种方式的更多相关文章

  1. 论tab切换的几种实现方法

    tab切换在网页中很常见,故最近总结了4种实现方法. 首先,写出tab的框架,加上最简单的样式,代码如下: <!DOCTYPE html> <html> <head> ...

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

    react之传递数据的几种方式 1.父子传值 父传值:<子的标签 value={'aaa'} index={'bbb'}></子的标签> 子接值:<li key={thi ...

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

    原文:[百度地图API]关于如何进行城市切换的三种方式 摘要:本文介绍了三种切换城市的方式:查询城市.城市列表和显示城市轮廓. ------------------------------------ ...

  4. jQuery Mobile页面跳转切换的几种方式

    jQuery Mobile在移动开发中越来越受到欢迎. 而他的各个版本号也在持续不断的更新中.相同的我也非常喜欢它,它加快了我们开发HTML5的速度. 同一时候又具备jQuery一样的操作方法. 学起 ...

  5. react中的ref的3种方式

    2020-03-31 react中的ref的3种方式 react中ref的3种绑定方式 方式1: string类型绑定 类似于vue中的ref绑定方式,可以通过this.refs.绑定的ref的名字获 ...

  6. uniapp使用swiper组件做tab切换动态获取高度

    swiper对高度进行了限制,所以说通常做出了tab切换的效果但是内容经常被截取掉???? 所以我在前端做了一个动态获取高度的功能 选项卡标题也就是tab切换的效果 选项卡内容区域的高度自适应 因为进 ...

  7. react 实现tab切换 三角形筛选样式

    ​ ​ 这次使用的是react的class 类组件 import React, { Component } from 'react' import { LeftOutline, SearchOutli ...

  8. react实现tab切换效果

    ...this.state = { // 全部数据 addressJobs: [ { address: '北京', jobs: ['北京职位1', '北京职位2', '北京职位3', '北京职位4', ...

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

    前两种主要实现一个选项卡的切换,第三种使用闭包看书,构造函数实现多个选项卡的切换: 1.第一种实现实现效果为: 实现代码为: <!doctype html> <!DOCTYPE ht ...

随机推荐

  1. Multiprotocol Label Switching (MPLS)

    Posted by: Margaret Rouse WhatIs.com   Contributor(s): Robert Sturt This definition is part of our E ...

  2. 关于提高python程序执行效率的思路和想法

    相比编译型语言(C系列)python胜在简介的语法和优雅的动态编程体验,但是在执行效率上,python有解释性语言先天的劣势——执行效率较低,为了让编写出的程序获得更快的执行效率,开启此文章. pyt ...

  3. 【JavaEE企业应用实战学习记录】struts2登录

    <%-- login.jsp Created by IntelliJ IDEA. User: Administrator Date: 2016/10/6 Time: 16:26 To chang ...

  4. ElasticSearch入门系列(三)文档,索引,搜索和聚合

    一.文档 在实际使用中的对象往往拥有复杂的数据结构 Elasticsearch是面向文档的,这意味着他可以存储整个对象或文档,然而他不仅仅是存储,还会索引每个文档的内容使之可以被搜索,在Elastic ...

  5. 学习Spring(一) 实例化Spring IoC容器

    实例化Spring IoC容器 1,读取其配置来创建bean实例 2,然后从Spring IoC容器中得到可用的bean实例 Spring提供两种IoC容器实现类型 a,一种为bean工厂 b,应用程 ...

  6. 计算机网络-TCP连接

    TCP首部20个字节 1.为什么TCP要三次握手建立连接? TCP连接过程,客户端发送请求到服务器,服务器确认请求发送到客户端,客户端再发送确认请求到服务器 原因:简言之,为了防止失效的连接请求发送到 ...

  7. android studio-创建第一个项目

    打开android studio 开始界面和Xcode有点类似,点击New project新建一个工程,新建过程和在Eclipse上差不多,这里就不赘述了. 下面开始新建项目 填写项目名称,和存放地址 ...

  8. C#-WinForm-ListView-表格式展示数据、如何将数据库中的数据展示到ListView中、如何对选中的项进行修改

    在展示数据库中不知道数量的数据时怎么展示最好呢?--表格 ListView - 表格形式展示数据 ListView 常用属性 HeaderStyle - "详细信息"视图中列标头的 ...

  9. wamp中修改后mysq数据库l闪退无法登陆解决办法

    WampServer安装后密码是空的,   修改一般有三种方式:   一是通过phpMyAdmin直接修改:   二是使用WAMP的MySql控制台修改.     三是重置密码    第一种:   1 ...

  10. python3 异常处理

    什么是异常 Python用异常对象(exception object)来表示异常情况.遇到错误会引发异常,如果异常对象未被处理或者捕捉,程序就会用回溯(traceback)终止执行. Raise语句: ...