［情境任務］

小當家：各位～我特製了一道新菜色，我命名為黃金開口笑

解師傅：什麼！？那不是我的拿手絕活嗎！怎麼變成你的了

小當家：因為他的製程要比較久，這必須標註是限量供應

解師傅：…竟然無視我的話

我們需要幫菜單標註限量供應的樣式，該怎麼做呢？

條件式渲染

有時候我們會遇到，在不同條件時，顯示的內容也會不一樣，這時候我們可以使用 JavaScript 中的運算子如 if else 或者 三元運算子判斷條件，並更新要渲染的 UI，最常看到的例子就是未登入與登入後

條件式渲染使用方式

以下會分享四種條件式渲染方式

• 判斷要 return 的組件
• 在 return 裡判斷要顯示的組件
• && 邏輯運算子
• 用樣式控制是否顯示組件

方式一：判斷要 return 的組件

先建立兩個組件，分別是未登入與登入後會出現的標題

components/Guest.js

const Guest = () => {
  return <h1>請先登入會員</h1>;
};

export default Guest;

components/User.js

const User = () => {
  return <h1>歡迎回來!</h1>;
};

export default User;

App.js

import User from "./components/User";
import Guest from "./components/Guest";

export default function App() {
  const isLogin = true;

  if (isLogin) {
    return <User />;
  } else {
    return <Guest />;
  }
}

在 App 引入組件，並做條件判斷，你可以將 isLogin 改為 false 試試
當 isLogin 為 true 會回傳 User 組件，false 時會回傳 Guest 組件

當然，你也可以將 if else 改為三元判斷式，看起來會更簡潔

export default function App() {
  const isLogin = true;

  return isLogin ? <User /> : <Guest />;
}

開啟 codesandbox 程式碼範例 來看看吧！

方式二：在 return 裡判斷要顯示的組件

你也可以直接在 return 裡做條件判斷，透過三元運算式來判斷顯示的組件，點擊按鈕看看效果吧！

components/Guest.js

const Guest = () => {
  return <h1>請先登入會員</h1>;
};

export default Guest;

components/User.js

const User = () => {
  return <h1>歡迎回來!</h1>;
};

export default User;

App.js

import User from "./components/User";
import Guest from "./components/Guest";
import { useState } from "react";

export default function App() {
  const [isLogin, setIsLogin] = useState(true);

  return (
    <div>
      {isLogin ? <User /> : <Guest />}

      <button onClick={() => { setIsLogin(!isLogin); }}>
        LOGIN
      </button>
    </div>
  );
}

點擊 LOGIN 按鈕後，會切換 isLogin 的開關，
如 isLogin 為 true 會顯示 User 組件，false 時會顯示 Guest 組件

開啟 codesandbox 程式碼範例 來看看吧！

方式三：&& 邏輯運算子

常常會有一些開關的判斷，我們希望只在條件為 true 時顯示組件，false 不渲染，
當然，你可以用三元運算子判斷

{ isLogin ? <h2>會員獨享送好禮</h2> : null }

也可以使用更簡潔的 && ，當條件為 true 時，&& 右側的 element 會出現在輸出中，
如果是 false，React 會忽略並跳過它

{ isLogin && <h2>會員獨享送好禮</h2> }

開啟 codesandbox 程式碼範例 來看看吧！

方式四：用樣式控制是否顯示組件

你可以用 CSS 或 style 控制是否顯示組件，利用 display 來控制 block 或是 none，

display: none 只是隱藏，element 還是存在

style 用法

<h2 style={{display: isLogin ? 'block' : 'none'}}>會員獨享送好禮</h2>

CSS 用法

<h2 className={isLogin ? 'd-block' : 'd-none'}>會員獨享送好禮</h2>

開啟 codesandbox 程式碼範例 來看看吧！



［任務解題］

我們要把黃金開口笑標註限量供應
先在資料加入 isLimited 來判斷是否為限量，接著傳入 props 到 List 組件

App.js

import List from "./components/List";
import Style from "./App.module.scss";

function App() {
  const menu = [
    { name: "蘆筍沙拉", price: 100, isLimited: false },
    { name: "辣炒空心菜", price: 120, isLimited: false },
    { name: "雞蛋豆腐", price: 150, isLimited: false },
    { name: "鳳梨蝦球", price: 300, isLimited: false },
    { name: "糖醋雞丁", price: 200, isLimited: false },
    { name: "砂鍋魚頭", price: 500, isLimited: false },
    { name: "竹筍炒肉絲", price: 150, isLimited: false },
    { name: "梨山高麗菜", price: 120, isLimited: false },
    { name: "五更腸旺", price: 250, isLimited: false },
    { name: "客家小炒", price: 250, isLimited: false },
    { name: "三杯杏鮑菇", price: 180, isLimited: false },
    { name: "黃金開口笑", price: 250, isLimited: true }
  ];

  return (
    <div className={Style.app}>
      <div className={Style.container}>
        <h1 className={Style.title}>React 熱炒店</h1>
        <ul>
          {menu.map((item, index) => (
            <List key={item.name} item={item} index={index}></List>
          ))}
        </ul>
      </div>
    </div>
  );
}

export default App;

components/List.js

import Counter from "./Counter";
import Style from "./List.module.scss";

const List = (props) => {
  const { name, price, isLimited } = props.item;
  return (
    <li className={Style.item}>
      <div className={Style.name}>
        <span>{name}</span>
        {isLimited && <span className={Style.limited}>(限量供應)</span>}
      </div>
      <span>${price}</span>
      <Counter />
    </li>
  );
};

export default List;

利用 && 邏輯運算子 將黃金開口笑標註 (限量供應) 的文字，就大功告成囉！

開啟 codesandbox 程式碼範例 來看看吧！

結語

分享了多種條件式渲染，我們可以看情境去判斷要使用哪種方式最合適，一起來練習看看吧！

本文將同步更新至我的部落格
Lala 的前端大補帖