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 ...
随机推荐
- MIT scheme入门使用
在win7下可安装MIT-GUN scheme, 点开后有两个界面:一个交互式命令行界面:一个Edwin界面. 在命令行界面按Ctrl-G可以开始输入.在Edwin界面,输入完整命令后按Ctrl ...
- Android中使用shape来定义控件
本文章转接于:http://kofi1122.blog.51cto.com/2815761/521605 Android中常常使用shape来定义控件的一些显示属性,今天看了一些shape的使用,对s ...
- nginx 搭建rtmp流媒体所用资源
Linux: 1.nginx安装包,自行下载. 2.nginx_mod_h264_streaming-2.2.7下载 3.nginx-rtmp-module-master下载 Windows: ngi ...
- python调win32api调整屏幕分辨率
需要频繁切换屏幕分辨率,想写个脚本来实现,需要切换时运行一下就好 在网上查到,需要用windows的api,ChangeDisplaySettings 实现代码如下 import win32api d ...
- Linux下VMWare虚拟机的使用技巧
使用技巧: 1.虚拟机安装文件:vm-workstation-full-8.0.3-703057.x86_64.bundle,./vm-workstation-full-8.0.3-703057.x8 ...
- python中print后面加逗号
python中print输出一行,如果想多次输出的内容不换行,可以在print后面加逗号 例如 每个输出一行 phrase = "abcdefg" # Add your for l ...
- 蘑菇街2015校招技术类笔试题A卷，回忆版(杭州站)
笔试时间:10月9号 下午 1.一串数据的最大递增序列,输出个数 例如 4,2, 6,3, 1,5, 最大递增序列为, 2,3, 5,输出3, 2.求两个整型数据集合的交集,尽可能少用时间. 假设两个 ...
- linux中如何使用微软鼠标的第4、5键
虽说使用linux的 人大都对微软没什么好感,但不能否认微软确实也出了不少好东西呀,比如微软鼠标(IE系列) icon_smile.gif IE 2.0和以上版本都有5个按钮,除了正常的左中右外,两侧 ...
- 35+雪花Logos设计灵感
快中秋节放假了,给大家分享一些雪花Logos设计灵感,陶冶下心情吧! 原文地址:http://www.goodfav.com/35-snowflake-logos-ideas-17134.html V ...
- java设计模式--行为型模式--中介者模式
怎么理解中介者模式,我姑且用房产中介来理解吧.呵呵 中介者模式: 中介者模式 概述 用一个中介对象来封装一系列的对象交互.中介者使各对象不需要显式地相互引用,从而使其耦合松散,而且可以独立地改变它们之 ...