react tab选项卡切换
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选项卡切换的更多相关文章
- 纯CSS实现tab选项卡切换
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta cont ...
- 下拉菜单效果和tab选项卡切换
//下拉菜单效果和tab选项卡切换. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- 微信小程序Tab选项卡切换大集合
代码地址如下:http://www.demodashi.com/demo/14028.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...
- 纯js实现网页tab选项卡切换效果
纯js实现网页tab选项卡切换效果 百度搜索 js 点击菜单项就可以切换内容的效果
- jQuery Tab选项卡切换代码
jQuery Tab选项卡切换代码是一款简单的jquery tab选项卡切换网页特效代码样式,可以修改tab选项卡相关样式. 代码下载:http://www.huiyi8.com/sc/10863.h ...
- Axure实现Tab选项卡切换功能
这几天用Axure画原型图的过程中,须要实现Tab选项卡切换的效果,但Axure中并没有类似于Tab控件的部件,所以能够用Axure中的动态面板(Dynamic Panel)来实现. 本文以已经汉化的 ...
- 7月新的开始 - LayUI的基本使用 - Tab选项卡切换显示对应数据
LayUI tab选项卡+page展示 要求:实现tab选项卡改变的同时展示数据也跟着改变 实现条件: 1. 选项卡 [官网 – 文档/示例 – 页面元素 – 选项卡] 2.数据表格 [官网 – 文档 ...
- vue实现tab选项卡切换效果
tab选项卡切换效果: 通过点击事件传入参数,然后通过v-show来进行切换显示 <template> <div class="box"> <div ...
- LayUI的基本使用 - Tab选项卡切换显示对应数据
要求:实现tab选项卡改变的同时展示数据也跟着改变 实现条件: 1. 选项卡 [官网 – 文档/示例 – 页面元素 – 选项卡] 2.数据表格 [官网 – 文档/示例 – 内置模块 – 数据表格] 3 ...
随机推荐
- QQ中未读气泡拖拽消失的实现（参照一位年轻牛B的博主的思路自己实现了一下）
原文链接:http://kittenyang.com/drawablebubble/,博主年轻却很有思想.相仿的年纪,很佩服他! 首先分析拖拽时的图,大圆.不规则的图(实际上时有规律的不然也画不出来, ...
- Unity脚本——Csharp
打印输出: Debug.Log(""); 游戏流程函数: Awake():在对象被创建的时候调用. Start():在Awake()方法之后执行.在脚本禁用后不会执行. updat ...
- AC自动机（模板）
#include <cstdio> #include <cstring> #include <iostream> #include <cstdlib> ...
- py正则表达式
1.元字符 . ^ $ * + ? {} [] \ | () --> [] : - 常用来指定一个字符集:[abc], [a-z] 匹配任意一个字符 - 元字符在字符集中不起作用:[akm ...
- Python即时网络爬虫项目: 内容提取器的定义(Python2.7版本)
1. 项目背景 在Python即时网络爬虫项目启动说明中我们讨论一个数字:程序员浪费在调测内容提取规则上的时间太多了(见上图),从而我们发起了这个项目,把程序员从繁琐的调测规则中解放出来,投入到更高端 ...
- python 在linux下通过top,和dh命令获得cpu,内存，以及硬盘信息
主要是通过os.popen读取命令输出实现的,os.popen启动新的进程,且将外部命令的输出作为文件类型对象返回.不能获得外部命令的返回值.既然是文件对象就可以直接用for in 来读取,代码如下: ...
- H5+Boostrap的音乐播放器
H5+Boostrap做简单的音乐播放器 前言:这个是综合一下我最近在学的东西做的小Demo,到实际使用还有距离,但是用来练手巩固知识点还是不错的,最近在二刷JS书和Boostrap.css的源码,做 ...
- Git学习05 －－分支管理02
1.冲突 产生冲突后,查看readme.txt 可以看到冲突内容 <<<<<<< ======= >>>>>>> ...
- BZOJ NOI十连测 第一测 T1
思路:首先考虑t=1的情况,t等于1,那么所有位置的颜色相同,我们不用考虑概率的问题,那么,k+d*x在模d下都相等,我们考虑预处理一个数组s[i][j],代表d为i,起始位置为j的等差数列的和,这个 ...
- C# Stopwatch类_性能_时间计时器
在研究性能的时候,完全可以使用Stopwatch计时器计算一项技术的效率.但是有时想知道某想技术的性能的时候,又常常想不起可以运用Stopwatch这个东西,太可悲了. 属性: Elapsed 获取当 ...