其实,在我们日常的编程当中,经常会碰到tab切换的模块,那么,实现他的方法也有很多中,下面是一款简单,容易理解的react tab切换方法。

通过设置state中的current 属性去控制tab 和 内容模块。

this.state = {
current: 0,
cities:['香港','北京','上海','台北'],
content:[{
number: '13866666666',
email: '111@qq.com,
time: 'test123',
},{
number: '13877777777',
email: '222@qq.com',
time: 'test456',
},{
number: '13888888888',
email: '333@qq.com',
time: 'test789',
},{
number: '13899999999',
email: '444@qq.com',
time: 'test000',
}]
};

定义一个tab onClick 事件的方法 itemNav,并接收当前点击的index索引号,赋值给current

itemNav = (index) =>{
this.setState({
current: index,
})
}

循环出tab 标签  并添加点击改变index索引事件,添加onClick执行itemNav方法,传入当前点击的索引号

<TabContent>
{this.state.cities.map((item,index) =>{
return (
<span key={index} className={ index === this.state.current ? 'state-active' : ''} onClick={ () => { this.itemNav(index)} }>{item}</span>
);
})}
</TabContent>

循环出内容模块,通过index索引号改变需要显示模块

<ContentContainer>
{this.state.content.map((item,index) =>{
return (
<ul key={index} className={index === this.state.current ? 'state-active' : ''} >
<li>
<p>测试标题</p>
</li>
<li>
<p>
<TelPhone fontSize="14px" color="#687593" />
<span>{item.number}</span>
</p>
</li>
<li>
<p>
<Email fontSize="14px" color="#687593" />
<a href={`mailto:${item.email}`}>{item.email}</a>
</p>
</li>
<li>
<p><span>{item.time}</span></p>
</li>
</ul>
);
})}
</ContentContainer>

  

这样,一个简单的react tab 切换就搞定了... css样式需要您添加自己需要的样式...(不喜勿喷,希望这个简单的tab切换能帮助到您)

react简单的tab切换 (styled-components)的更多相关文章

  1. 简单的Tab切换组件

    由于代码都有注释,所以不多加解释,大家都知道的.直接贴代码: 代码如下: /** * 简单的Tab切换 * 支持可配置项 如下参数 */ function Tab(){ this.config = { ...

  2. react实现的tab切换组件

    我有点想要吐槽,因为用原生的js实现起来挺简单的一个小东西,改用react来写却花了我不少时间,也许react的写法只有在复杂的web应用中才能体现出它的优势吧!不过吐槽归吐槽,对react这种优雅的 ...

  3. jquery实现简单的Tab切换菜单

    实现tab切换的主要html代码: <div class="container"> <ul class="tabs"> <li c ...

  4. DIV+CSS 样式简单布局Tab 切换

    <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...

  5. jQuery实现简单的tab切换

    html: <section>   <nav id="nav">     <a class="on">tab1</a& ...

  6. 【angular】angular实现简单的tab切换

    html: <div class="list-group" ng-repeat="tab in menuList"> <a href=&quo ...

  7. 从一个简单的Tab切换开始——与AJAX的结合

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 最简单的tab切换

    JS: $(".con").eq(0).show();    $(".btn span").click(function(){        var num = ...

  9. 简单实现Tab切换(带框架)

    <script type="text/javascript"> $(function () { //加载时添加的标签卡 if ('<%=Request[" ...

随机推荐

  1. DB2中的MQT优化机制详解和实践

    MQT :物化查询表.是以一次查询的结果为基础  定义创建的表(实表),以量取胜(特别是在百万,千万级别的量,效果更显著),可以更快的查询到我们需要的结果.MQT有两种类型,一种是系统维护的MQT , ...

  2. Java自动化测试框架-09 - TestNG之依赖注入篇 (详细教程)

    1.-依赖注入 TestNG支持两种不同类型的依赖项注入:本机(由TestNG本身执行)和外部(由诸如Guice的依赖项注入框架执行). 1.1-本机依赖项注入 TestNG允许您在方法中声明其他参数 ...

  3. RESTful基本概念

    文章目录 01 前言 02 RESTful的来源 03 RESTful6大原则 1. C-S架构 2. 无状态 3.统一的接口 4.一致的数据格式 4.系统分层 5.可缓存 6.按需编码.可定制代码( ...

  4. Apache配置反向代理、负载均衡和集群(mod_proxy方式)

    Apache配置负载均衡和集群使用mod_jk的方式比较多,但是mod_jk已经停止更新,并且配置相对复杂.Apache2.2以后,提供了一种原生的方式配置负载均衡和集群,比mod_jk简单很多. 1 ...

  5. 使用Typescript重构axios(十七)——增加axios.create接口

    0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...

  6. 使用Typescript重构axios(二十)——请求取消功能:实现第一种使用方式

    0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...

  7. SpringBoot项目热启动

    一.添加POM依赖 <!-- 热部署模块 --> <dependency> <groupId>org.springframework.boot</groupI ...

  8. 20190725 NOIP模拟8

    今天起来就是虚的一批,然后7.15开始考试,整个前半个小时异常的困,然后一看题,T1一眼就看出了是KMP,但是完了,自己KMP的打法忘的一干二净,然后开始打T2,T2肝了一个tarjan点双就扔上去了 ...

  9. [LINQ2Dapper]最完整Dapper To Linq框架(二)---动态化查询

    目录 [LINQ2Dapper]最完整Dapper To Linq框架(一)---基础查询 [LINQ2Dapper]最完整Dapper To Linq框架(二)---动态化查询 [LINQ2Dapp ...

  10. webpack 打包优化的四种方法(多进程打包,多进程压缩,资源 CDN,动态 polyfill)

    如今,webpack 毫无疑问是前端构建领域里最耀眼的一颗星,无论你前端走哪条路线,都需要有很强的webpack 知识.webpack 的基本用法这里就不展开讲了.主要探讨一下如何提高 webpack ...