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. 已知TSP问题的最好解

    a280 : 2579ali535 : 202339att48 : 10628att532 : 27686bayg29 : 1610bays29 : 2020berlin52 : 7542bier12 ...

  2. 安卓初步：通讯技术介绍&&安卓介绍

    通讯技术: 1G    模拟制式    只能进行语音通话. 2G    GSM, CDMA    收发短信和邮件. 2.5G    GPRS, EDGE    访问wap网络数据.(图片, 壁纸, 文 ...

  3. javascript统计输入文本的简易方法

    计算文本框的输入字符数的简易方法: ]; var tValue = text.value; num = Math.ceil(getLength(tValue)/); //正则:用于区分中文为两个字节 ...

  4. ThinkPhp调用webservice

    模板页: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  5. openssl 第一篇

    自从老罗赞助了openssl以及心脏出血事件的新闻,得以了解了openssl.那么什么是openssl呢?下面摘自官网: The OpenSSL Project is a collaborative  ...

  6. Win7网络检测 WindowsAPICodePack

    原文:http://www.cnblogs.com/yincheng01/archive/2010/05/30/2213234.html 在Windows7操作系统下,支持的网络类型越来越复杂,微软提 ...

  7. mvn打包发布

    一:打包 cmd进入工作目录运行命令 1: mvn clean 2: mvn install  3: mvn clean compile    4: mvn package -DiskipTest  ...

  8. You and your research

    英文版http://www.cs.virginia.edu/~robins/YouAndYourResearch.html 视频版http://www.youtube.com/watch?v=a1zD ...

  9. javascript prototype __proto__区别

    An Object's __proto__ property references the same object as its internal [[Prototype]] (often refer ...

  10. Keil中Memory Model和Code Rom Size说明

    C51中定义变量时如果省略存储器类型,Keil C51编译系统则会按编译模式SMALL.COMPACT和LARGE所规定的默认存储器类型去指定变量的存储区域,无论什么存储模式都可以声明变量在任何的80 ...