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