<!DOCTYPE html>

<html>

  <head>

    <script src="js/react.js"></script>

    <script src="js/JSXTransformer.js"></script>

    <link rel="stylesheet" tpe="text/css" href="style.css"/>

  </head>

  <body>

    <div id="container"></div>

    <script type="text/jsx">

      var data = [

        {name: 'Red', value: 'red'},

        {name: 'Blue', value: 'blue'},

        {name: 'Yellow', value: 'yellow'},

        {name: 'Green', value: 'green'},

        {name: 'White', value: 'White'}

      ];

      var TabSelector = React.createClass({

        getInitialState: function() {

          return {selected: this.props.selected};

        },

        handleOnClick: function (evt) {

          this.setState({'selected': evt.target.getAttribute('data-value')})

        },

        render: function() {

          var tabs = this.props.data.map(function (item) {

            var selected = item.value == this.state.selected ? 'selected' : '';

            return <li data-value={item.value}

                className={selected}

                onClick={this.handleOnClick}

              >{item.name}</li>

            ;

          }, this);

          return <div className="tab-selector">

            <label>{this.props.label}</label>

            <ul>

              {tabs}

            </ul>

          </div>

          ;

        }

      });

      React.render(

        TabSelector({label: 'Color', data: data, selected: null}),

        document.getElementById('container')

      );

    </script>

  </body>

</html>

　　

react tab的更多相关文章

  1. react tab选项卡切换

    Tab选项卡切换是个很常见也很简单的小功能,用原生js和jq去写的话可能不到20行代码就搞定so easy.但是用react去实现就没那么容易了(是自己react比较菜).由于最近在重新学习react ...

  2. 使用react context实现一个支持组件组合和嵌套的React Tab组件

    纵观react的tab组件中,即使是github上star数多的tab组件,实现原理都非常冗余. 例如Github上star数超四百星的react-tab,其在render的时候都会动态计算哪个tab ...

  3. react实现的tab切换组件

    我有点想要吐槽,因为用原生的js实现起来挺简单的一个小东西,改用react来写却花了我不少时间,也许react的写法只有在复杂的web应用中才能体现出它的优势吧!不过吐槽归吐槽,对react这种优雅的 ...

  4. react简单的tab切换 (styled-components)

    其实,在我们日常的编程当中,经常会碰到tab切换的模块,那么,实现他的方法也有很多中,下面是一款简单,容易理解的react tab切换方法. 通过设置state中的current 属性去控制tab 和 ...

  5. Facebook React完全解析

    2004年,对于前端社区来说,是里程碑式的一年.Gmail横空出世,它带来基于前端渲染的原生应用级别的体验,相对于之前的服务端渲染网页可谓提升了一个时代,触动了用户的G点.自此,前端渲染的网站成为无数 ...

  6. 探索React生态圈

    原文地址:http://www.csdn.net/article/2015-08-04/2825370-react 2004年,对于前端社区来说,是里程碑式的一年.Gmail横空出世,它带来基于前端渲 ...

  7. React——教程 && 零基础入门 && 从实践中学习（待续）

    Tutorial: Intro to React This tutorial doesn’t assume any existing React knowledge. Tip This tutoria ...

  8. 【原】react做tab切换的几种方式

    最近搞一个pc端的活动,搞了一个多月,甚烦,因为相比于pc端,更喜欢移动端多一点.因为移动端又能搞我的react了. 今天主要总结一下react当中tab切换的几种方式,因为tab切换基本上都会用到. ...

  9. React Native 系列(九) -- Tab标签组件

    前言 本系列是基于React Native版本号0.44.3写的.很多的App都使用了Tab标签组件,例如QQ,微信等等,就是切换不同的选项,显示不同的内容.那么这篇文章将介绍RN中的Tab标签组件. ...

随机推荐

  1. Redis学习笔记--五种数据类型的使用场景

    String 1.String 常用命令: 除了get.set.incr.decr mget等操作外,Redis还提供了下面一些操作: 获取字符串长度 往字符串append内容 设置和获取字符串的某一 ...

  2. xcode8继续愉快的使用插件

    https://github.com/inket/update_xcode_plugins https://github.com/fpg1503/MakeXcodeGr8Again xcode8增加了 ...

  3. style="display"之后不能获取offsetHeight或clientWidth这类测量的值

    如果在html元素中设置了style="display:none;height:90px;"的属性后,是无法获得offsetLeft ,offsetWidth,offsetTop, ...

  4. 使用node.js的bodyParser中间件读取post数据解析

    昨天我们使用的网关转发数据时出了点问题! 情景是这样的,另一方以Post的形式向我的node.js服务推送JSON数据.但是使用bodyParser中间件后,在req.body中拿不到任何信息. 代码 ...

  5. Linux下/etc/resolv.conf 配置DNS客户

    文件/etc/resolv.conf配置DNS客户,它包含了主机的域名搜索顺序和DNS服务器的地址,每一行应包含一个关键字和一个或多个的由空格隔开的参数.下面是一个例子文件: search mydom ...

  6. ASP.NET关于Login控件使用 (转）

    分类: C# 2011-02-21 10:38 4599人阅读 评论(0) 收藏 举报 loginasp.netstringurlserverbutton 今天上网找了一些关于Login控件的使用资料 ...

  7. JMeter学习-008-JMeter 后置处理器实例之 - 正则表达式提取器（一）概述及简单实例

    上文我们讲述了如何对 HTTP请求 的响应数据进行断言,以判断响应是否符合我们的预期,敬请参阅:JMeter学习-007-JMeter 断言实例之一 - 响应断言 那么我们如何获取 HTTP请求 响应 ...

  8. 【Android Studio快捷键】之导入相应包声明（import packages）

    可能import 单个声明的快捷键大家都很容易找到,Alt+Enter.但是如果我要一次性import文件中所有的声明,这个快捷键是什么呢,找啊找的,就是没找到,以前在Eclipse是Ctrl+1,但 ...

  9. android studio 0.8.11 如何导入Library（新手向）

    网上下了个ViewPagerIndicator的库,下载下来是个zip包,解压开来,里面有一个library和一个sample文件夹,还有一些其他的配置文件. 其中library就是我们新项目中要引入 ...

  10. Oracle导入中文乱码解决办法

    Oracle导入中文乱码解决办法 一.确保各个客户端字符集的编码同服务器字符集编码一致 1-       确定sqlplus字符集编码,如果是windows设置环境变量. 2-       确保Sec ...