React基础-JSX语法条件渲染详解

雨点打透心脏的1/2处 2023-10-02 20:49 1阅读 0赞

### React条件渲染 ###

**某些情况下，界面的内容会根据不同的情况显示不同的内容，或者决定是否渲染某部分内容:**

> 在vue中，我们会通过指令来控制:比如v-if、v-show;
> 
> 在React中，所有的条件判断都和普通的JavaScript代码一致;

**常见的条件渲染的方式有哪些呢?**

> 方式一: 条件判断语句判断, 适合逻辑较多的情况

class App extends React.Component {
        
      constructor() {
        
        super()
    
        this.state = {
        
          isShow: true
        }
      }
    
      render() {
        
        const {
         isShow } = this.state
    
        let showElement = null
        // 条件判断语句决定显式的内容
        if (isShow) {
        
          showElement = <h2>哈哈哈</h2>
        } else {
        
          showElement = <h2>呵呵呵</h2>
        }
    
        return (
          <div>
            {
        /* 方式一: 条件判断语句 */}
            {
        showElement}
          </div>
        )
      }
    }
    
    const app = ReactDOM.createRoot(document.querySelector("#app"))
    app.render(<App/>)

> 方式二: 三元运算符判断, 适合逻辑比较简单

class App extends React.Component {
        
      constructor() {
        
        super()
    
        this.state = {
        
          isShow: true
        }
      }
    
      render() {
        
        const {
         isShow } = this.state
        }
    
        return (
          <div>
            {
        /* 方式二: 三元运算符判断 */}
            <div>{
        isShow ? <h2>我是标题</h2> : <p>我是内容</p> }</div>
          </div>
        )
      }
    }
    
    const app = ReactDOM.createRoot(document.querySelector("#app"))
    app.render(<App/>)

> 方式三: (*类似于Vue中v-if的效果*)逻辑与运算符&&, 适合如果条件成立，渲染某一个组件;如果条件不成立，什么内容也不渲染;
> 
> 例如下面代码表示student有值的时候才会渲染, 没有值什么也不渲染

class App extends React.Component {
        
          constructor() {
        
            super()
    
            this.state = {
        
              student: {
        
                firstName: "chen",
                lastName: "yq"
              }
            }
          }
    
          render() {
        
            const {
         student } = this.state
    
            return (
              <div>
                {
        /* 方式三: 逻辑与运算符 */}
                <div>{
        student && <h2>{
        student.firstName + " " + student.lastName}</h2>}</div>
              </div>
            )
          }
        }
        
        const app = ReactDOM.createRoot(document.querySelector("#app"))
        app.render(<App/>)

**v-show的效果**

> 主要是控制display属性是否为none, 在React中也可以实现v-show的效果

class App extends React.Component {
        
      constructor() {
        
        super()
    
        this.state = {
        
          isShow: true
        }
      }
    
      render() {
        
        const {
         isShow } = this.state
    
        return (
          <div>
            {
        /* v-show的效果, 切换display */}
            <h2 style={
        {
        display: isShow ? "block" : "none"}}>哈哈哈</h2>
          </div>
        )
      }
    }
    
    const app = ReactDOM.createRoot(document.querySelector("#app"))
    app.render(<App/>)