React 中的條件渲染

元件通常需要根據不同的條件顯示不同的內容，在 React 中，我們可以使用 JavaScript 語法（例如if 語句、&& 和 ? : 運算子）有條件地渲染 JSX。

使用三元運算符（? :）渲染

舉個例子，有一個變數 isLoggedIn 判斷使用者是否登入，此時根據三元運算符的結果，將會顯示後面的元素 <p>請登錄以查看內容。</p>。

function App() {
  const isLoggedIn = false;

  return (
    <div>
      {isLoggedIn ? <p>歡迎回來！</p> : <p>請登入以查看內容。</p>}
    </div>
  );
}

使用邏輯運算符（&&）渲染

在 React 元件內部，當想要在條件為 true 時渲染一些 JSX，或者不渲染任何內容時，邏輯運算符經常會出現。

function App() {
  const isLoggedIn = true;

  return (
    <div>
      {isLoggedIn && <p>歡迎回來！</p>}
    </div>
  );
}

使用條件渲染來實現動態 UI

上面的範例我們寫死了 isLoggedIn 的值，但真實的情況應該是：使用者點擊登入後改變了 isLoggedIn 的值，useState 我們會在後面的單元去介紹它。

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  function login() {
    setIsLoggedIn(true);
  };

  return (
    <div>
      {isLoggedIn ? <p>歡迎回來！</p> : <p>請登入以查看內容。</p>}

      <button onClick={login}>
        {isLoggedIn ? '登出' : '登入'}
      </button>
    </div>
  );
}

提前返回 JSX

我們甚至可以在沒有登入的情況下，提前返回一個 JSX，這樣子將不會執行後面的程式碼。

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  if (!isLoggedIn) return <p>請登入以查看內容。</p>

  // 有登入才會顯示下面的 JSX
  return (
    <div>
	  <h1>Hello React!</h1>
	  <p>歡迎回來</p>
    </div>
  );
}

條件渲染的常見方法

1. 邏輯運算符（&&）
2. 三元運算符（?:）

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <div>
      {/* 使用邏輯運算符 */}
      {isLoggedIn && <p>已登入</p>}
      {!isLoggedIn && <p>未登入</p>}

      {/* 使用三元運算符 */}
      {isLoggedIn ? <p>已登入</p> : <p>未登入</p>}
    </div>
  );
}

結語

條件渲染是 React 中很常使用到的技術之一，它允許根據特定條件來動態調整和呈現 UI，透過這些範例，我們已經了解了 React 中條件渲染的基本原理以及如何在各種情況下應用它。這是建構交互式和動態 React 應用的關鍵技巧之一。