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. Android5.0+(CollapsingToolbarLayout)

    CollapsingToolbarLayout作用是提供了一个可以折叠的Toolbar,它继承至FrameLayout,给它设置layout_scrollFlags,它可以控制包含在Collapsin ...

  2. React-Native OpenGL体验一

    昨天初体验了一把SVG一个并不是多么复杂的动画,我在iOS模拟器上体验的是流畅的,但是在Android真机上体验,还是比较卡的. 下面来介绍一个OpenGL的第三方库: 下面是我运行的里面Demo的效 ...

  3. 自定义tableviewCell的分割线

    第一种:addsubview UIView *line = [[UIView alloc]initWithFrame:CGRectMake(10, cellH-0.5, DEVW-10, 0.5)]; ...

  4. OpenCV——IplImage

    IplImage结构: typedef struct _IplImage { int nSize; /* IplImage大小 */ int ID; /* 版本 (=0)*/ int nChannel ...

  5. (原) c++ 杂

    Declaration of variables   C++ is a strongly-typed language, and requires every variable to be decla ...

  6. Java 一个字符串在另外一个字符串出现次数

    统计一个字符串在另外一个字符串出现次数 代码如下: package me.chunsheng.javatest; import java.util.regex.Matcher; import java ...

  7. Django中文无法转换成latin-1编码的解决方案

    在Ubuntu上用Django做Web开发的时候遇到了中文保存到Cookie无法解析的问题,经过了下面几个步骤终于把问题解决了: 修改/usr/lib/python3.4/wsgiref/header ...

  8. PHP ReflectionClass

    <?php /** * @desc test reflectionclass * @author songweiqing * @create_time 2015-01-7 * */ class ...

  9. 纯js实现积木（div）拖动效果

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

  10. MySQL--连接属性

    The capability flags are used by the client and server to indicate which features they support and w ...