[情境任務]
小當家:各位~我特製了一道新菜色,我命名為黃金開口笑
解師傅:什麼!?那不是我的拿手絕活嗎!怎麼變成你的了
小當家:因為他的製程要比較久,這必須標註是限量供應
解師傅:…竟然無視我的話
我們需要幫菜單標註限量供應的樣式,該怎麼做呢?
條件式渲染
有時候我們會遇到,在不同條件時,顯示的內容也會不一樣,這時候我們可以使用 JavaScript 中的運算子如 if else 或者 三元運算子判斷條件,並更新要渲染的 UI,最常看到的例子就是未登入與登入後
條件式渲染使用方式
以下會分享四種條件式渲染方式
- 判斷要 return 的組件
- 在 return 裡判斷要顯示的組件
- && 邏輯運算子
- 用樣式控制是否顯示組件
方式一:判斷要 return 的組件
先建立兩個組件,分別是未登入
與登入後
會出現的標題
components/Guest.js
1 | const Guest = () => { |
components/User.js
1 | const User = () => { |
App.js
1 | import User from "./components/User"; |
在 App 引入組件,並做條件判斷,你可以將 isLogin 改為 false
試試
當 isLogin 為 true 會回傳 User
組件,false 時會回傳 Guest
組件
當然,你也可以將 if else 改為三元判斷式,看起來會更簡潔
1 | export default function App() { |
方式二:在 return 裡判斷要顯示的組件
你也可以直接在 return 裡做條件判斷,透過三元運算式來判斷顯示的組件,點擊按鈕看看效果吧!
components/Guest.js
1 | const Guest = () => { |
components/User.js
1 | const User = () => { |
App.js
1 | import User from "./components/User"; |
點擊 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 | import List from "./components/List"; |
components/List.js
1 | import Counter from "./Counter"; |
利用 && 邏輯運算子
將黃金開口笑標註 (限量供應) 的文字,就大功告成囉!!
結語
分享了多種條件式渲染,我們可以看情境去判斷要使用哪種方式最合適,一起來練習看看吧!
本文為 IT 鐵人賽系列文 你 React 了嗎? 30 天解鎖 React 技能
🚀實體工作坊分享
玩轉 Web頁面的前端技術(HTML/CSS/JS) 一日體驗課
最近時賦學苑開了實體體驗課,即使你對程式碼沒有概念也能上手!Lala 會帶你一起做出一個個人品牌形象網站,帶你快速了解前端的開發流程,快跟我們一起玩轉 Web 吧!🚀線上課程分享
線上課程可以加速學習的時間,省去了不少看文件的時間XD,以下是我推薦的一些課程想學習更多關於前後端的線上課程,可以參考看看。
Hahow
Hahow 有各式各樣類型的課程,而且是無限次數觀看,對學生或上班族而言,不用擔心被時間綁住六角學院
如果你是初學者,非常推薦六角學院哦!剛開始轉職也是上了六角的課,非常的淺顯易懂,最重要的是,隨時還有線上的助教幫你解決問題!
Udemy
Udemy 裡的課程非常的多,品質普遍不錯,且價格都滿實惠的,CP值很高!也是很多工程師推薦的線上課程網站。