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. 基础命名空间：序列化 System.Runtime.Serialization

    对象通常都有状态(state),从一个对象中抽取这种状态,不论是将它存储于某地,还是通过网络传送,这种抽取动作称为“将一个对象序列化”,而反向处理过程,从一个被序列化的状态重建一个对象即为反序列化. ...

  2. 创建对象时引用的关键字,assign,copy,retain

    创建对象时引用的关键字:assign: 简单赋值,不更改索引计数(强引用)copy: 建立一个索引计数为1的对象,然后释放旧对象retain:释放旧的对象,将旧对象的值赋予输入对象,再提高输入对象的索 ...

  3. ubuntu 快捷图标

    ubuntu的图标都存在 /usr/share/applications下 图标是Desktop的后缀 首先gedit /usr/share/applications/xx.Desktop xx为应用 ...

  4. linux 系统下java开发环境的配置

    在安装之前,确保你的linux系统下有 jdk,jboss等相关软件 一.配置JDK环境变量 步骤: 解压缩JDK文件: unzip jdk1.6.0_31.zip 目录下显示文件夹jdk1.6.0_ ...

  5. Unity脚本——Csharp

    打印输出: Debug.Log(""); 游戏流程函数: Awake():在对象被创建的时候调用. Start():在Awake()方法之后执行.在脚本禁用后不会执行. updat ...

  6. poj1623 Squadtrees

    转载请注明出处: http://www.cnblogs.com/fraud/          ——by fraud 需要求出按题目要求建四叉树所需的结点个数,和压缩后的四叉树的结点个数(压缩即只要将 ...

  7. gcc 编译的4个过程简单识记

    直入正题,测试编译代码如下: lude <stdio.h> int main() { ,y,z; x*=(y=z=); printf("%d\n",x); z=; x= ...

  8. jquery之stop()的用法

    // 为了看效果,随意写的动画 $('#animater').animate({ 'right':-800 }, 3000).animate({'font-size':'16px'},'normal' ...

  9. css pre如果同时运用了css的border-radius、 overflow两个属性且标签中内容太多时,外部div滚动条在firefox下滚动时很卡

    pre如果同时运用了css的border-radius. overflow两个属性且标签中内容太多时,外部div滚动条在firefox下滚动时很卡. 解决方法:去掉css中border-radius. ...

  10. 继续Python爬虫

    先贴上代码 # coding:utf-8 import urllib2 import urllib import re gjc = urllib.quote('你好') url = 'http://s ...