[情境任務]
小當家:各位~我特製了一道新菜色,我命名為黃金開口笑
解師傅:什麼!?那不是我的拿手絕活嗎!怎麼變成你的了
小當家:因為他的製程要比較久,這必須標註是限量供應
解師傅:…竟然無視我的話
我們需要幫菜單標註限量供應的樣式,該怎麼做呢?
條件式渲染
有時候我們會遇到,在不同條件時,顯示的內容也會不一樣,這時候我們可以使用 JavaScript 中的運算子如 if else 或者 三元運算子判斷條件,並更新要渲染的 UI,最常看到的例子就是未登入與登入後
條件式渲染使用方式
以下會分享四種條件式渲染方式
- 判斷要 return 的組件
- 在 return 裡判斷要顯示的組件
- && 邏輯運算子
- 用樣式控制是否顯示組件
方式一:判斷要 return 的組件
先建立兩個組件,分別是未登入
與登入後
會出現的標題
components/Guest.js
1 2 3 4 5
| const Guest = () => { return <h1>請先登入會員</h1>; };
export default Guest;
|
components/User.js
1 2 3 4 5
| const User = () => { return <h1>歡迎回來!</h1>; };
export default User;
|
App.js
1 2 3 4 5 6 7 8 9 10 11 12
| 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 改為三元判斷式,看起來會更簡潔
1 2 3 4 5
| export default function App() { const isLogin = true;
return isLogin ? <User /> : <Guest />; }
|
方式二:在 return 裡判斷要顯示的組件
你也可以直接在 return 裡做條件判斷,透過三元運算式來判斷顯示的組件,點擊按鈕看看效果吧!
components/Guest.js
1 2 3 4 5
| const Guest = () => { return <h1>請先登入會員</h1>; };
export default Guest;
|
components/User.js
1 2 3 4 5
| const User = () => { return <h1>歡迎回來!</h1>; };
export default User;
|
App.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
| 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
組件
方式三:&& 邏輯運算子
常常會有一些開關的判斷,我們希望只在條件為 true 時顯示組件,false 不渲染,
當然,你可以用三元運算子判斷
1
| { isLogin ? <h2>會員獨享送好禮</h2> : null }
|
也可以使用更簡潔的 &&
,當條件為 true 時,&&
右側的 element 會出現在輸出中,
如果是 false,React 會忽略並跳過它
1
| { isLogin && <h2>會員獨享送好禮</h2> }
|
方式四:用樣式控制是否顯示組件
你可以用 CSS 或 style 控制是否顯示組件,利用 display 來控制 block
或是 none
,
display: none
只是隱藏,element 還是存在
style 用法
1
| <h2 style={{display: isLogin ? 'block' : 'none'}}>會員獨享送好禮</h2>
|
CSS 用法
1
| <h2 className={isLogin ? 'd-block' : 'd-none'}>會員獨享送好禮</h2>
|
[任務解題]
我們要把黃金開口笑標註限量供應
先在資料加入 isLimited 來判斷是否為限量,接著傳入 props 到 List 組件
App.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34
| 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
| 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;
|
利用 && 邏輯運算子
將黃金開口笑標註 (限量供應) 的文字,就大功告成囉!!
結語
分享了多種條件式渲染,我們可以看情境去判斷要使用哪種方式最合適,一起來練習看看吧!
本文為 IT 鐵人賽系列文 你 React 了嗎? 30 天解鎖 React 技能
Hey!想學習更多前端知識嗎?
最近 Lala 開了前端課程 👉
【實地掌握RWD - 12小時新手實戰班】👈
無論您是 0 基礎新手,又或是想學 RWD 的初學者,
我們將帶你從零開始,深入了解並掌握 RWD 響應式網頁設計的核心技術,快來一起看看吧 😊
🚀線上課程分享
線上課程可以加速學習的時間,省去了不少看文件的時間XD,以下是我推薦的一些課程
想學習更多關於前後端的線上課程,可以參考看看。
Hahow 有各式各樣類型的課程,而且是無限次數觀看,對學生或上班族而言,不用擔心被時間綁住
如果你是初學者,非常推薦六角學院哦!
剛開始轉職也是上了六角的課,非常的淺顯易懂,最重要的是,隨時還有線上的助教幫你解決問題!
Udemy 裡的課程非常的多,品質普遍不錯,且價格都滿實惠的,CP值很高!
也是很多工程師推薦的線上課程網站。