ReactJS - 給條件渲染
你好，未來的 React 開發者們！今天，我們將深入 React 最强大的功能之一：條件渲染。如果你是編程新手，別擔心；我會逐步引導你理解這個概念，正如我過去幾年來為無數學生所做的那樣。所以，來一杯咖啡（或者茶，如果你喜歡的話），讓我們一起踏上這個令人興奮的旅程吧！
條件渲染是什麼？
在我們深入 React 的具體內容之前，讓我們先來討論一下條件渲染到底是什麼。想象你正在創造一張神奇的賀卡。根據是白天還是晚上，你希望賀卡上寫著「早安！」或「晚安！」。這就是條件渲染的總結——根據特定條件顯示不同的內容。
在 React 中，條件渲染的工作方式與此非常相似。它讓我們能夠創建出根據應用程序中的不同條件或狀態而改變的動態用戶界面。
在 React 中的條件渲染
現在，讓我們看看如何在 React 中實現條件渲染。我們將從最簡單的方法開始，然後逐漸進階到更高级的技巧。
1. 使用 if/else 語句
實現條件渲染最直接的方法是使用老式的 if/else 語句。我們來看一個例子：
function Greeting({ isLoggedIn }) {
if (isLoggedIn) {
return <h1>歡迎回來！</h1>;
} else {
return <h1>請登錄。</h1>;
}
}在這個例子中，我們有一個 Greeting 组件，它接受一個 prop isLoggedIn。根據用戶是否登錄，它會返回不同的 JSX。
2. 使用三元運算符
雖然 if/else 語句效果很好，但它可能會使我們的代碼變得有些冗長。這時，三元運算符就派上用場了——一種更简洁的條件寫法：
function Greeting({ isLoggedIn }) {
return (
<h1>
{isLoggedIn ? '歡迎回來！' : '請登錄。'}
</h1>
);
}這與我們之前的例子做完全相同的事情，但形式更加紧凑。它就像是條件渲染的瑞士軍刀！
3. 使用邏輯 && 運算符
有時候，你可能只想在條件為真時渲染某些內容，如果條件為假，則不渲染任何東西。在這種情況下，邏輯 && 運算符非常方便：
function Notification({ hasUnreadMessages }) {
return (
<div>
{hasUnreadMessages &&
<p>你有新的消息！</p>
}
</div>
);
}在這個例子中，只有當 hasUnreadMessages 為真時，<p> 元素才會被渲染。如果它為假，則不會在其位置渲染任何東西。
4. 使用 switch 語句
當你有多个條件要檢查時，switch 語句可以是一種乾淨的處理條件渲染的方法：
function WeatherForecast({ weather }) {
switch(weather) {
case 'sunny':
return <p>今天天气真好！</p>;
case 'rainy':
return <p>記得帶傘！</p>;
case 'snowy':
return <p>穿暖一點，外面很冷！</p>;
default:
return <p>天气預報不可用。</p>;
}
}這種方法在你要處理几個不同的情況時特別有用。
5. 條件渲染组件
有時候，你可能想要條件性地渲染整个组件。下面是如何操作的：
function Dashboard({ isAdmin }) {
return (
<div>
<h1>歡迎來到你的儀表板</h1>
{isAdmin && <AdminPanel />}
<UserPanel />
</div>
);
}在這個例子中，只有當 isAdmin 為真時，AdminPanel 组件才會被渲染，而 UserPanel 則總是被渲染。
高级技巧
現在我們已經介紹了基礎知識，讓我們來看看一些更高级的條件渲染技巧。
6. 使用對象進行條件渲染
有時候，你可能會發現自己有許多條件。在這種情況下，使用對象可以使你的代碼更易於维护：
const PAGES = {
home: <HomePage />,
about: <AboutPage />,
contact: <ContactPage />,
};
function App({ currentPage }) {
return (
<div>
{PAGES[currentPage] || <NotFoundPage />}
</div>
);
}這種方法在你有許多不同的页面或组件需要根据條件渲染時特別有用。
7. 使用 HOCs 進行條件渲染
高阶组件（HOCs）也可以用於條件渲染。以下是一個简单的例子：
function withAuth(Component) {
return function AuthenticatedComponent(props) {
const isAuthenticated = checkAuthStatus(); // 實現這個函數
if (isAuthenticated) {
return <Component {...props} />;
} else {
return <LoginPage />;
}
}
}
const ProtectedPage = withAuth(SecretPage);這個 HOC 為它包裹的任何组件添加了認證邏輯，只有當用戶認證通過時才渲染组件。
結論
條件渲染是你在 React 工具包中的強大工具。它讓你能夠創建出能夠根據數據變化和用戶交互而調整的動態、響應式用戶界面。與任何編程概念一樣，掌握條件渲染的關鍵在於練習。試著在你的项目中實現這些技巧，很快你就能像專家一樣進行條件渲染了！
記住，並沒有一種「正確」的條件渲染方法。最好的方法取決於你的具體用例和个人（或團隊）偏好。所以，請嘗試，享受樂趣，並祝編程愉快！
| 方法 | 描述 | 使用場景 |
|---|---|---|
| if/else 語句 | 传统的條件邏輯 | 簡單的條件，有多个代码行 |
| 三元運算符 | 紧凑的條件表达式 | 簡單的條件，有短小的表达式 |
| 邏輯 && 運算符 | 根据條件渲染或不渲染 | 当你只希望在條件为真时渲染某物 |
| switch 語句 | 多个不同的情況 | 当你有几个具体的條件要检查 |
| 條件渲染组件 | 条件性地渲染整个组件 | 当不同的用户类型需要不同的 UI |
| 基于对象的渲染 | 使用对象映射條件和组件 | 当你有许多不同的页面/组件要渲染 |
| 使用 HOCs 的條件渲染 | 用 HOC 包裹组件添加條件邏輯 | 当你想在多个组件间复用條件邏輯 |
Credits: Image by storyset