React-使用分支if

方法一 

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相应的数据过多时不介意使用第二种方法，会使项目看起来奇怪