方法一
import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component{
state={
showmodel:false
}
//方法
change=()=>{
//动态的更改值 类似于小程序语法
this.setState({
showmodel:!this.state.showmodel
})
}
render(){
let persons=null;
if(this.state.showmodel){
persons=<div >是否显示的标签</div>
}
return(
<div className="App">
{ persons}
<button onClick={this.change.bind}>点击切换</button>
</div>
)
}
}
export default App;
方法二、三目运算符
import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component{
state={
showmodel:false
}
//方法
change=()=>{
//动态的更改值 类似于小程序语法
this.setState({
showmodel:!this.state.showmodel
})
}
render(){
return(
<div className="App">
{this.state.showmodel? <div >是否显示的标签</div>:null }
<button onClick={this.change.bind}>点击切换</button>
</div>
)
}
}
export default App;
如果html相应的数据过多时不介意使用第二种方法,会使项目看起来奇怪