React 中的條件渲染：動態渲染 UI 元素

React 中的條件渲染：根據條件渲染 UI

React 中的條件渲染是指根據某些條件或狀態渲染不同 UI 元素的技術。 React 提供了多種方法來根據應用程式的狀態或屬性有條件地渲染元件或元素。

---

1.什麼是條件渲染？

條件渲染是根據特定條件渲染不同元件或元素的概念。在 React 中，這通常是透過使用 JavaScript 運算子 來實現的，例如 JSX 中的 if、三元或 && 來決定應顯示的內容。

為什麼要使用條件渲染？

• 根據使用者互動或狀態變化顯示不同的 UI 元素。
• 處理邊緣情況，例如顯示載入狀態、錯誤訊息或空狀態。
• 動態切換不同的版面或元件。

---

2.基本條件渲染技術

a.使用 if/else 語句

在傳回 JSX 之前可以使用使用 if 或 else 語句的傳統方法。當需要檢查多個條件時，這特別有用。

import React, { useState } from "react";

const MyComponent = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  } else {
    return <button onClick={() => setIsLoggedIn(true)}>Login</button>;
  }
};

b.使用三元運算子

三元運算子是執行條件渲染的簡寫方式。當您想要在條件為 true 時顯示一個元素，如果條件為 false 時顯示另一個元素時，它非常有用。

import React, { useState } from "react";

const MyComponent = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <>
      {isLoggedIn ? (
        <h1>Welcome back!</h1>
      ) : (
        <button onClick={() => setIsLoggedIn(true)}>Login</button>
      )}
    </>
  );
};

c.使用邏輯 && 運算子

&& 運算子是一個短路運算符，如果條件為 true，則渲染元素。當您只需要有條件地渲染某些內容而不需要 else 分支時，此方法非常有用。

import React, { useState } from "react";

const MyComponent = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <>
      {isLoggedIn && <h1>Welcome back!</h1>}
      {!isLoggedIn && <button onClick={() => setIsLoggedIn(true)}>Login</button>}
    </>
  );
};

---

3.使用函數進行條件渲染

您也可以使用函數來更清晰地處理條件渲染，尤其是當有多個條件需要檢查時。

import React, { useState } from "react";

const MyComponent = () => {
  const [status, setStatus] = useState("loading");

  const renderContent = () => {
    if (status === "loading") {
      return <p>Loading...</p>;
    } else if (status === "error") {
      return <p>Error occurred!</p>;
    } else {
      return <p>Data loaded successfully!</p>;
    }
  };

  return (
    <div>
      {renderContent()}
      <button onClick={() => setStatus("error")}>Simulate Error</button>
      <button onClick={() => setStatus("success")}>Simulate Success</button>
    </div>
  );
};

---

4.使用 React 元件進行條件渲染

有時，您可能想要根據特定條件渲染整個元件。

import React, { useState } from "react";

const Welcome = () => <h1>Welcome back!</h1>;
const Login = () => <button>Login</button>;

const MyComponent = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return isLoggedIn ? <Welcome /> : <Login />;
};

---

5.基於陣列映射的條件渲染

如果要渲染項目列表，可以使用條件渲染來選擇性地渲染列表中的某些元素。

import React, { useState } from "react";

const MyComponent = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  } else {
    return <button onClick={() => setIsLoggedIn(true)}>Login</button>;
  }
};

---

6.使用 useEffect 進行 API 呼叫的條件渲染

在許多情況下，您將根據 API 呼叫或非同步資料所取得的結果有條件地渲染元素。這可以透過 useEffect 使用狀態和副作用來完成。

import React, { useState } from "react";

const MyComponent = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <>
      {isLoggedIn ? (
        <h1>Welcome back!</h1>
      ) : (
        <button onClick={() => setIsLoggedIn(true)}>Login</button>
      )}
    </>
  );
};

---

7.條件渲染的最佳實踐

• 保持簡單：避免深層嵌套的條件，使 JSX 難以閱讀和維護。
• 使用輔助函數：如果您有多個條件，使用輔助函數來渲染 UI 的不同部分通常會更簡潔。
• 考慮狀態和道具：條件渲染通常取決於元件的狀態或道具。確保處理邊緣情況，例如載入狀態、空資料和錯誤。

---

8.結論

條件渲染是 React 中的一個基本概念，它使您能夠根據狀態或 props 顯示不同的 UI 元素。透過使用 if、三元運算子、&& 運算子甚至函數等技術，您可以動態調整元件呈現的內容。正確的條件渲染可以根據應用程式的狀態或使用者互動顯示適當的內容，有助於改善使用者體驗。

以上是React 中的條件渲染：動態渲染 UI 元素的詳細內容。更多資訊請關注PHP中文網其他相關文章！