Tab选项卡切换是个很常见也很简单的小功能,用原生js和jq去写的话可能不到20行代码就搞定so easy。但是用react去实现就没那么容易了(是自己react比较菜)。由于最近在重新学习react就试着写了一个tab切换的小列子。还有多可优化的地方希望能抛砖引玉(简单写了点注释)。

html代码

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

</head>

<body>

    <div id="app" ></div>

    <script src="./dist/js/bundle.js" ></script>

</body>

</html>

js代码

import React,{Component} from 'react';

import {render} from 'react-dom';

class Tab extends Component{

  constructor(){

    super()

    this.state = {

      list:['导航一','导航二','导航三'],

      content:[

        {item:'内容一'},

        {item:'内容二'},

        {item:'内容三'}

      ],

      current:0

    }

  }

  handleClick(index){

    this.setState({ current:index });

  }

  currentClass(index){

    return this.state.current === index ? 'current' : '';

  }

  contentClass(index){

    return this.state.current === index ? 'active' : '';

  }

  render(){

    return(

      <div id="outer" >

        <ul id="tab" >

            //通过props的形式传递数据和方法给子组件

            //::this es7的语法详见https://github.com/tc39/proposal-bind-operator

            { this.state.list.map( (val,index ) => {

              return (<List currentClass={::this.currentClass} handleClick={::this.handleClick} val={val} key={index} index={index} /> )

           }) }

        </ul>

        <div id="content" >

        { this.state.content.map( ( val,index ) => {

                  return ( <Content key={index} val={val.item} index={index}  contentClass={::this.contentClass } /> )

        })}

        </div>

      </div>

    )

  }

}

class List extends Component{

    handleClick(){

        //调用父组件的方法 将逻辑处理交给父组件

       this.props.handleClick(this.props.index);

    }

    render(){

      return(

          <li className={this.props.currentClass(this.props.index)} onClick={::this.handleClick} >{this.props.val}</li>

      )

    }

}

class Content extends Component{

    render(){

        return(

            <div className={this.props.contentClass(this.props.index)} >{ this.props.val  }</div>

        )

    }

}

render( <Tab/>,document.querySelector("#app") );

CSS代码(sass)

body,ul,li{ margin:0;padding:0; }

body{ font:12px/1.5 Tahoma; }

#outer{

  width:450px;

  margin:10px auto;

  #tab{

    overflow:hidden;

    background:#000;

    border:1px solid #000;

    li { float:left;color:#fff;height:30px;

      cursor:pointer;line-height:30px;

      list-style:none;padding:0 20px;

     }

     .current{ color:#000;background:#ccc; }

  }

  #content{ border:1px solid #000; border-top-width:0;

    height:300px;

    >div{ display:none;  }

    .active{ display:block }

   }

}

完整例子可以移动到我的github上 react-tab

react tab选项卡切换的更多相关文章

  1. 纯CSS实现tab选项卡切换

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta cont ...

  2. 下拉菜单效果和tab选项卡切换

    //下拉菜单效果和tab选项卡切换. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  3. 微信小程序Tab选项卡切换大集合

    代码地址如下:http://www.demodashi.com/demo/14028.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

  4. 纯js实现网页tab选项卡切换效果

    纯js实现网页tab选项卡切换效果 百度搜索     js 点击菜单项就可以切换内容的效果

  5. jQuery Tab选项卡切换代码

    jQuery Tab选项卡切换代码是一款简单的jquery tab选项卡切换网页特效代码样式,可以修改tab选项卡相关样式. 代码下载:http://www.huiyi8.com/sc/10863.h ...

  6. Axure实现Tab选项卡切换功能

    这几天用Axure画原型图的过程中,须要实现Tab选项卡切换的效果,但Axure中并没有类似于Tab控件的部件,所以能够用Axure中的动态面板(Dynamic Panel)来实现. 本文以已经汉化的 ...

  7. 7月新的开始 - LayUI的基本使用 - Tab选项卡切换显示对应数据

    LayUI tab选项卡+page展示 要求:实现tab选项卡改变的同时展示数据也跟着改变 实现条件: 1. 选项卡 [官网 – 文档/示例 – 页面元素 – 选项卡] 2.数据表格 [官网 – 文档 ...

  8. vue实现tab选项卡切换效果

    tab选项卡切换效果: 通过点击事件传入参数,然后通过v-show来进行切换显示 <template> <div class="box"> <div ...

  9. LayUI的基本使用 - Tab选项卡切换显示对应数据

    要求:实现tab选项卡改变的同时展示数据也跟着改变 实现条件: 1. 选项卡 [官网 – 文档/示例 – 页面元素 – 选项卡] 2.数据表格 [官网 – 文档/示例 – 内置模块 – 数据表格] 3 ...

随机推荐

  1. 关于用Java写的贪吃蛇游戏的一些感想

    学习Java有那么一个月了,兴趣还是挺高的.然而最近老师布置的一个迷宫问题,着实让我头疼了一两个礼拜,以至于身心疲惫,困扰不安.无奈,暂且先放下这个迷宫问题,写个简单点的贪吃蛇程序,以此来提高低落的情 ...

  2. MRC BlOCK ARC

       /*-------------------MRC环境中-------------------------*/     //使用局部变量:a到block块中,为了在block中能够使用这个变量,将 ...

  3. TCP粘包/拆包问题的解决

    TCP粘包拆包问题 一个完整的包可能被TCP拆分成多个包,或多个小包封装成一个大的数据包发送. 解决策略 消息定长,如果不够,空位补空格 在包尾增加回车换行符进行分割,例如FTP协议 将消息分为消息头 ...

  4. C++11新特性

    c++语言的扩展和修正,不仅包含了核心语言的新机能,而且扩展了c++标准库(STL),并引入了大部分的C++ technical report 1程序库 C++11还包括大量新特性:包括lambda表 ...

  5. ETL概述

    转自:http://blog.csdn.net/leosoft/article/details/4279536 ETL,Extraction-Transformation-Loading的缩写,中文名 ...

  6. [转]Cocos2d-x建工程时避免copy文件夹和库

    原文链接:  http://www.cnblogs.com/andyque/archive/2011/09/27/2192920.html 在上一篇教程中,我们演示了如何使用VS2010来新建一个工程 ...

  7. 最大连续子序列（HDU 1231 DP）

    最大连续子序列 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Sub ...

  8. Taurus.MVC

    开源:Taurus.MVC 框架 为什么要创造Taurus.MVC: 记得被上一家公司忽悠去负责公司电商平台的时候,情况是这样的: 项目原版是外包给第三方的,使用:WebForm+NHibernate ...

  9. 主要协议SCSI、FC、iSCSI

    一.SCSI SCSI是小型计算机系统接口(Small Computer System Interface)的简称,于1979首次提出,是为小型机研制的一种接口技术,现在已完全普及到了小型机,高低端服 ...

  10. 我的第一个MFC的ArcGIS Engine程序

    原文 http://blog.csdn.net/zzahkj/article/details/9003518 (第一版,以VC++6.0+AE9.3为例) 首次,学习MFC,写个笔记,MFC还是挺好学 ...