为什么80%的码农都做不了架构师？>>> 
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 state
this.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
我被操作
}
}
ReactDOM.render(
非常简单，只要改变行内样式即可：
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 state
this.state = {
index: 0
};
}
tab(arg1,event) {
this.setState({index:arg1})
}
render() {
return
1
2
3
C1
C2
C3
}
}
ReactDOM.render(
index.css
.show{ display:block;}
.hide{ display:none;}我们审查元素：
3.循环json数据生成结构的tab切换
我们有这样一个json数据：
constructor(props) {
super(props);
// 设置 initial state
this.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 state
this.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[i].title});
arrcon.push({this.state.json[i].con});
}
return
{arrtitle}
{arrcon}
}
}
ReactDOM.render(