React條件渲染實例講解使用

更新時間：2022年11月01日 16:54:37 作者：-耿瑞-

在React中，你可以創(chuàng)建不同的組件來封裝各種你需要的行為。然后還可以根據(jù)應用的狀態(tài)變化只渲染其中的一部分。React 中的條件渲染和JavaScript中的一致，使用JavaScript操作符if或條件運算符來創(chuàng)建表示當前狀態(tài)的元素，然后讓React根據(jù)它們來更新UI

我們先創(chuàng)建一個用于演示條件渲染的組件

import './App.css';
import React from "react";
class App extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      signIn: false
    }
  }
  increase(){
    this.setState({
      signIn: !this.state.signIn
    })
  }
  render(){
    let ligin = this.state.signIn?<span>已登錄</span>:<span>未登錄</span>
    return (
      <div className="App">
        { ligin }
        <button onClick = { this.increase.bind(this) }>{ this.state.signIn?"取消登錄":"登錄" }</button>
      </div>
    )
  }
}
export default App;

這里我們模擬了一個登錄和未登錄的情況

首先我們在state中定義了一個signIn 這是個布爾類型的變量比喻成他為true 表示用戶已登錄為false 表示用戶還沒有登錄

然后我們在render函數(shù)中定義了一個ligin變量他用了三元運算符這里是在判斷 this.state.signIn是不是true

如果為true 則為已登錄否則是未登錄

然后這個ligin就接受到了結(jié)果然后我們將他插入在我們的頁面元素中

運行的效果就是這樣

然后我們點一下按鈕

因為按鈕的點擊事件會改變signIn 他的條件改變了渲染的元素就不一樣了

然后我們的條件判斷也可以直接寫在頁面里

我們在state中再加一個list值

constructor(props){
super(props);
  this.state = {
    signIn: false,
    list: []
  }
}

我們加了一個list變量他的值是一個空數(shù)組

然后我們在render中循環(huán)遍歷這個list

render(){
  let ligin = this.state.signIn?<span>已登錄</span>:<span>未登錄</span>
  return (
    <div className="App">
      { ligin }
      <div>
        {
          this.state.list.map((item,index) =>{
            return <p key = {index}>{ item }</p>
          })
        }
      </div>
      <button onClick = { this.increase.bind(this) }>{ this.state.signIn?"取消登錄":"登錄" }</button>
    </div>
  )
}

但大家或許會發(fā)現(xiàn) 我們的數(shù)組是沒有值的啊

用戶一看你這什么都沒有是不是出問題啦？

這是我們就可以判斷如果數(shù)組是空的給用戶一個提示

render(){
 let ligin = this.state.signIn?<span>已登錄</span>:<span>未登錄</span>
 return (
   <div className="App">
     { ligin }
     {
       this.state.list.length > 0?
       <div>
         {
           this.state.list.map((item,index) =>{
             return <p key = {index}>{ item }</p>
           })
         }
       </div>
       :
       <div>暫無數(shù)據(jù)....</div>
     }
     <button onClick = { this.increase.bind(this) }>{ this.state.signIn?"取消登錄":"登錄" }</button>
   </div>
 )
}

我們這里判斷this.state.list的長度大于0 我們就循環(huán)渲染如果是0 那就展示提示暫無數(shù)據(jù)…

我們代碼運行結(jié)果如下