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 ...
随机推荐
- 跨域调用webservice
本人第一次在博客园写博客. 最近研究js的跨域调用,举个小例子. ASP.net 中webservice 源代码 /// <summary> /// Service1 的摘要说明 ...
- 如何更改 Mac OS X 系统默认用户名
说到 Mac 用户名估计有许多人都不知道在哪个地方修改,其实说简单也简单说麻烦也麻烦看你自己的需求.好比如果你只要用户名的登录更改,那是就非常简单的事了.下面这里就给大家介绍mac osx系统如何更改 ...
- automaticallyAdjustsScrollViewInsets的作用
简单点说就是automaticallyAdjustsScrollViewInsets根据按所在界面的status bar,navigationbar,与tabbar的高度,自动调整scrollview ...
- struts2中的国际化
[java] view plaincopy 实现struts2中国际化其实非常简单 首先,struts2中的国际化是通过资源文件来配置的. 资源文件分为:action类级,package类级,还有we ...
- (转) Pointers
原地址 http://www.cplusplus.com/doc/tutorial/pointers/ Pointers In earlier chapters, variables have bee ...
- 17款提高编程效率的css工具
参看下面链接:<17款提高编程效率的css工具>
- [C++程序设计]指向数组元素的指针
如果先使p指向数组a的首元素(即p=a),则: (1) p++(或p+=1).使p指向下一元素,即a[1]. 如果用*p,得到下一个元素a[1]的值. (2) *p++.由于++和*同优先级,结合方向 ...
- vmware9安装centos和Mac经验总结
其实以前安装过,但是这次安装发现还是很陌生 主要是因为以下几点vm11下载的最新版本结果不支持用vm-Mac激活包一直激活不成功,所以只好用vm9来进行,中间的细节操作就是要停止的那几项VMware服 ...
- MySQL--连接属性
The capability flags are used by the client and server to indicate which features they support and w ...
- Linux vps无法发送邮件
首先安装sendmail软件...yum install sendmail /etc/init.d/php-fpm restart 来检查下sendmail是否正常运行 /etc/init.d/sen ...