ReactJS - 條件渲染

---

---

React中的條件渲染

條件渲染用於根據情況向用戶顯示/隱藏UI的某些部分。例如，如果使用者未登入Web應用程式，則Web應用程式將顯示登入按鈕。當用戶登入Web應用程式時，相同的連結將被歡迎訊息替換。

讓我們學習React提供的支援條件渲染的選項。

條件渲染的方法

React提供了多種在Web應用程式中進行條件渲染的方法。它們如下所示：

• 條件語句

• JSX/UI變數

• JSX中的邏輯&&運算子

• JSX中的條件運算子

• null返回值

條件語句

條件語句是根據條件渲染UI的簡單直接的方法。讓我們考慮一下，需求是編寫一個元件，該元件將根據使用者的登入狀態顯示登入連結或歡迎訊息。以下是使用條件渲染實現元件的程式碼：

function Welcome(props) {
   if(props.isLoggedIn) {
      return <div>Welcome, {props.userName}</div>
   } else {
      return <div><a href="/login">Login</a></div>
   }
}

這裡：

• 使用isLoggedIn props檢查使用者是否已登入。

• 如果使用者已登入，則返回歡迎訊息。

• 如果使用者未登入，則返回登入連結。

元件的使用方法如下所示：

function App() {
   return (
      <div className="container">
         <div style={{ padding: "10px" }}>
            <div>
               <Welcome isLoggedIn={true} userName={'John'} />
            </div>
         </div>
      </div>
   );
}

元件將渲染歡迎訊息，如下所示：

JSX/UI變數

React允許將JSX元素儲存到變數中，並在需要時使用它。開發者可以透過條件語句建立必要的JSX並將其儲存在變數中。一旦UI儲存在變數中，就可以按如下所示渲染它：

function Welcome(props) {
   let output = null;
   if(props.isLoggedIn) {
      output = <div>Welcome, {props.userName}</div>
   } else {
      output = <div><a href="/login">Login</a></div>
   }
   return output
}

在這裡，我們使用變數output來儲存UI。元件的使用方法如下：

function App() {
   return (
      <div className="container">
         <div style={{ padding: "10px" }}>
            <div>
               <Welcome isLoggedIn={true} userName={'John'} />
            </div>
         </div>
      </div>
   );
}

元件將渲染歡迎訊息，如下所示：

邏輯&&運算子

React允許在JSX程式碼中使用任何表示式。在Javascript中，條件是從左到右應用的。如果最左邊的條件為假，則不會處理下一個條件。開發者可以利用此特性，在JSX本身中輸出訊息，如下所示：

function ShowUsers(props) {
   return (
      <div>
         <ul>
            {props.users && props.users.length > 0 &&
               props.users.map((item) => 
                  (
                     <li>{item}</li>
                  )
               )}
         </ul>
      </div>
   );
}
export default ShowUsers;

這裡：

• 首先，將檢查props.users 的可用性。如果props.users為null，則不會進一步處理條件。

• 一旦props.users可用，則將檢查陣列的長度，並且只有當長度大於零時，才會進一步處理條件。

• 最後，將透過map函式遍歷props.users，並渲染使用者資訊作為無序列表。

元件的使用方法如下：

function App() {
   const users = ['John', 'Peter']
   return (
      <div className="container">
         <div style={{ padding: "10px" }}>
            <div>
               <ShowUsers users={users} />
            </div>
         </div>
      </div>
   );
}

元件將渲染使用者，如下所示：

JSX中的條件運算子

由於React允許在JSX中使用任何javascript表示式，因此開發者可以在JSX中使用條件運算子（a =b ? x : y）並僅渲染必要的UI元素，如下所示：

function Welcome(props) {
   if(props.isLoggedIn) {
      return props.isLoggedIn ?
      <div>Welcome, {props.userName}</div> : <div><a href="/login">Login</a></div>
   }
}

在這裡，我們使用條件運算子來顯示歡迎訊息或登入連結。元件的使用方法如下：

function App() {
   return (
      <div className="container">
         <div style={{ padding: "10px" }}>
            <div>
               <Welcome isLoggedIn={true} userName={'John'} />
            </div>
         </div>
      </div>
   );
}

元件將渲染歡迎訊息，如下所示：

null返回值

只有當元件返回UI元素時，React才會渲染元件。否則，它將靜默跳過渲染，沒有任何錯誤訊息。開發者可以利用此特性，僅在滿足條件時才渲染某些UI。

function Welcome(props) {
   return props.isLoggedIn ? <div>Welcome, {props.userName}</div> : null
}

這裡：

• 我們使用條件運算子來顯示/隱藏歡迎訊息。

• null不渲染任何UI。

元件的使用方法如下：

function App() {
   return (
      <div className="container">
         <div style={{ padding: "10px" }}>
            <div>
               <div>Welcome component will not output any content</div>
                  <Welcome isLoggedIn={false} />
               </div>
            </div>
         </div>
      </div>
   );
}

元件將渲染歡迎訊息，如下所示：

總結

React提供了多種方法來有條件地渲染UI元素。開發者必須透過分析情況來選擇方法。