1.显示隐藏效果

显示隐藏就需要结合我们的react事件处理，一般的显示隐藏可以用css的display处理：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';//设置组件
class ShowHide extends React.Component {constructor(props) {super(props);// 设置 initial statethis.state = {style: {display:"block",color:"red"}};}  showhide() {if(this.state.style.display==="block"){this.setState({style:{display:"none",color:"#000"}})}else{this.setState({style:{display:"block",color:"red"}})}}render() {return <div><button onClick={this.showhide.bind(this)}>显示隐藏</button><div style={this.state.style}>我被操作</div></div>}}ReactDOM.render(<div><ShowHide /></div>,document.getElementById('root')
);
registerServiceWorker();

非常简单，只要改变行内样式即可：

2.tab切换效果

其实tab切换不过是对显示隐藏效果的进一步扩展，我们改用操作类型切换处理这个效果，加一个状态计数：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';//设置组件
class Tab extends React.Component {constructor(props) {super(props);// 设置 initial statethis.state = {index: 0};}   tab(arg1,event) {this.setState({index:arg1})}render() {return <div><div><span onClick={this.tab.bind(this,0)}>1</span><span onClick={this.tab.bind(this,1)}>2</span><span onClick={this.tab.bind(this,2)}>3</span></div><div><div className={this.state.index==0?"show":"hide"}>C1</div><div className={this.state.index==1?"show":"hide"}>C2</div><div className={this.state.index==2?"show":"hide"}>C3</div></div></div>}}ReactDOM.render(<div><Tab /></div>,document.getElementById('root')
);
registerServiceWorker();

index.css

.show{ display:block;}
.hide{ display:none;}

我们审查元素：

3.循环json数据生成结构的tab切换

我们有这样一个json数据：

    constructor(props) {super(props);// 设置 initial statethis.state = {index: 0,json:[{title:"1",con:"C1"},{title:"2",con:"C2"},{title:"3",con:"C3"},{title:"4",con:"C4"},{title:"5",con:"C5"}]};}  

把传递的参数写活即可：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';//设置组件
class Tab extends React.Component {constructor(props) {super(props);// 设置 initial statethis.state = {index: 0,json:[{title:"1",con:"C1"},{title:"2",con:"C2"},{title:"3",con:"C3"},{title:"4",con:"C4"},{title:"5",con:"C5"}]};}   tab(arg1,event) {this.setState({index:arg1})}render() {var arrtitle=[];var arrcon=[];for(var i=0;i<this.state.json.length;i++){arrtitle.push(<span key={i} onClick={this.tab.bind(this,i)}>{this.state.json[i].title}</span>);arrcon.push(<div key={i} className={this.state.index===i?"show":"hide"}>{this.state.json[i].con}</div>);}return <div><div>{arrtitle}</div><div>{arrcon}</div></div>}}ReactDOM.render(<div><Tab /></div>,document.getElementById('root')
);
registerServiceWorker();