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(    
    
		
     	
    
,    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 state		this.state = {			index: 0		};		}		    tab(arg1,event) {		this.setState({index:arg1})			}		render() {		return 
    
			
     
				
      1				
      2				
      3			
     
			
     
				
      
       C1
      
				
      
       C2
      
				
      
       C3
      
			
     
		
    
	}	}ReactDOM.render(    
    
		
     	
    
,    document.getElementById('root'));registerServiceWorker();

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(    
     
		
      	
     
,    document.getElementById('root'));registerServiceWorker();