Lala Code

Lala 的前端大補帖,歡迎一起鑽研前端技術😊

0%

【DAY 12】條件式 render 與 && 邏輯運算子

cover

[情境任務]

小當家:各位~我特製了一道新菜色,我命名為黃金開口笑

解師傅:什麼!?那不是我的拿手絕活嗎!怎麼變成你的了

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

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

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


條件式渲染

有時候我們會遇到,在不同條件時,顯示的內容也會不一樣,這時候我們可以使用 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 技能




🚀實體工作坊分享

玩轉 Web頁面的前端技術(HTML/CSS/JS) 一日體驗課

最近時賦學苑開了實體體驗課,即使你對程式碼沒有概念也能上手!Lala 會帶你一起做出一個個人品牌形象網站,帶你快速了解前端的開發流程,快跟我們一起玩轉 Web 吧!



🚀線上課程分享

線上課程可以加速學習的時間,省去了不少看文件的時間XD,以下是我推薦的一些課程
想學習更多關於前後端的線上課程,可以參考看看。

Hahow

Hahow 有各式各樣類型的課程,而且是無限次數觀看,對學生或上班族而言,不用擔心被時間綁住



六角學院

如果你是初學者,非常推薦六角學院哦!
剛開始轉職也是上了六角的課,非常的淺顯易懂,最重要的是,隨時還有線上的助教幫你解決問題!


Udemy

Udemy 裡的課程非常的多,品質普遍不錯,且價格都滿實惠的,CP值很高!
也是很多工程師推薦的線上課程網站。
❤️