React-使用分支if

最新推荐文章于 2025-02-09 17:08:17 发布

面壁思过程

最新推荐文章于 2025-02-09 17:08:17 发布

阅读量587

点赞数

CC 4.0 BY-SA版权

文章标签： React-使用分支if

本文链接：https://blog.youkuaiyun.com/Candy_mi/article/details/90719395

react 专栏收录该内容

11 篇文章

订阅专栏

博客介绍了React中使用分支if的方法，提到一种常规方法和三目运算符方法，同时指出当html相应数据过多时，不建议使用三目运算符，否则项目会看起来奇怪。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法一

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