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. WeiFenLuo.winFormsUI.Docking.dll的使用(停靠效果)

    1.  重置工具箱: 新建一个WinForm程序,项目名称为TestDockPanelControl.选中Form1窗体后选择工具箱--->>新建个添加选项卡命名为WeiFenLuo--- ...

  2. mysql设置字体

    如果在linux下重启mysql服务的时候出现Job failed to start,在window下重启失败,这是因为你安装了高版本的mysql(mysql5.5以上),在高版本对字符编码方式修改的 ...

  3. struts2中的action访问web对象

    Struts2的Action就是一个普通的POJO对象,它和Web对象request.response.session和application没有耦合在一起,这样便于单独测试Action,那么我们在A ...

  4. poj1200Crazy Search (哈希)

    转载请注明出处: http://www.cnblogs.com/fraud/          ——by fraud Crazy Search Time Limit: 1000MS   Memory ...

  5. perl6 JSON::Fast模块json解析的使用

    关于JSON: JSON (JavaScript Object Notation)是一种轻量级的数据交换格式,语法简单,各种语言都有相应的库或者模块支持. 因为JSON非常小巧,解析起来又非常简单,我 ...

  6. js继承模式

    组合继承是js常用的继承模式,指的是将原型链和借用构造函数的技术结合在一起.其中的思想是使用原型链实现原型属性和方法的继承, 而通过借用构造函数实现对属性的继承. 例子: <script> ...

  7. centos 6.4从源码安装mysql 5.6笔记

    上周在安装mysql时遇到了些许麻烦,今天整理下. 在代码目录建立obj文件夹. 在obj目录下,执行cmake .. -DXXX  // XXX表示一些参数,详见http://dev.mysql.c ...

  8. spring中连接池的配置

    在默认通过myeclipse生成的配置里,spring使用的是apache的dbcp连接池 <bean id="dataSource" class="org.apa ...

  9. Python爬虫使用Selenium+PhantomJS抓取Ajax和动态HTML内容

    1,引言 在Python网络爬虫内容提取器一文我们详细讲解了核心部件:可插拔的内容提取器类gsExtractor.本文记录了确定gsExtractor的技术路线过程中所做的编程实验.这是第二部分,第一 ...

  10. Multi-Channel MAC for Ad Hoc Networks: Handling Multi-Channel Hidden Terminals Using A Single Transceiver

    MAC协议 2004 这是一个单纯的Multi-Channel Ad Hoc场景,多信道,但不是DSA.没有PU,只是多信道利用问题,相对传统Ad Hoc,要解决的就是1)信道访问(如何使用多个信道) ...