【React】项目代码开发技巧大全（不定期更新）

需求一：有两个div，有相同的样式，但分别用不同的state控制展示

菜鸟的代码

state= {
	show1:false,
	show2:false
}
change = ()=>{
	this.setState({
		show1:!this.state.show1
	})
}
<div style={{display:this.state.show1?'block':'none',width:"100px",height:"100px",backgroundColor:"red",borderRadius:"5px"}}>1</div>
<div style={{display:this.state.show2?'none':'block',width:"100px",height:"100px",backgroundColor:"red",borderRadius:"5px"}}>2</div>
<button onClick={this.change}>点击切换</button>

十几年老鸟的代码

const divStyle = {width:"100px",height:"100px",backgroundColor:"red",borderRadius:"5px"}
render(){
		state= {
		show1:false,
		show2:false
	}
	return <div>
				{
					!!this.state.show1&&
					<div style={divStyle}>1</div>
				}
				{
					!!this.state.show2&&
					<div style={divStyle}>2</div>
				}
				<button onClick={()=>this.setState({show:!this.state.show})}>点击切换</button>
			</div>
}