React 中的條件渲染

React 中的條件渲染

在 React 中，條件渲染與 JavaScript 的條件語句類似。我們可以根據某些條件來動態地渲染不同的內容。這使得 React 應用能夠根據應用狀態顯示不同的 UI。

1. 使用 if 語句進行條件渲染

最基本的條件渲染方式是使用 JavaScript 的 if 語句，根據條件決定要渲染的內容。

範例：使用 if 渲染內容

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;

  if (isLoggedIn) {
    return <h1>歡迎回來！</h1>;
  } else {
    return <h1>請先登入。</h1>;
  }
}

export default Greeting;

在這個範例中，根據 props.isLoggedIn 的值來決定顯示 “歡迎回來！” 還是 “請先登入。”。

2. 使用三元運算符進行條件渲染

三元運算符是另一種常見的條件渲染方式，這是一種簡潔的語法，適合進行簡單的條件渲染。

範例：使用三元運算符

function Greeting(props) {
  return (
    <h1>{props.isLoggedIn ? '歡迎回來！' : '請先登入。'}</h1>
  );
}

這種方式讓程式碼變得更加簡潔，當條件非常簡單時非常實用。

3. 使用邏輯 && 運算符進行條件渲染

在 React 中，&& 邏輯運算符可以用來根據條件渲染某個內容。如果條件為 true，則渲染後面的內容；如果條件為 false，則什麼也不渲染。

範例：使用 && 渲染內容

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;

  return (
    <div>
      <h1>信箱</h1>
      {unreadMessages.length > 0 && (
        <h2>你有 {unreadMessages.length} 封未讀信件。</h2>
      )}
    </div>
  );
}

在這個範例中，只有當 unreadMessages.length 大於 0 時，才會顯示未讀信件數量的訊息。

4. 條件渲染組件

React 允許我們根據條件來渲染不同的組件，這使得複雜的 UI 更加靈活和易於維護。

範例：條件渲染組件

function LoginButton(props) {
  return <button onClick={props.onClick}>登入</button>;
}

function LogoutButton(props) {
  return <button onClick={props.onClick}>登出</button>;
}

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;

  if (isLoggedIn) {
    return <LogoutButton onClick={props.onLogout} />;
  } else {
    return <LoginButton onClick={props.onLogin} />;
  }
}

這裡我們根據 isLoggedIn 的狀態來渲染不同的按鈕（登入或登出）。

5. 防止組件渲染

有時候我們可能希望在某些情況下阻止一個組件渲染。返回 null 可以告訴 React 不渲染任何內容。

範例：返回 null 防止渲染

function WarningBanner(props) {
  if (!props.warn) {
    return null;
  }

  return <div className="warning">警告！</div>;
}

當 props.warn 為 false 時，WarningBanner 組件將不會渲染任何東西。

6. 條件渲染的應用

條件渲染在 React 應用中非常常見，以下是一些應用場景：

• 根據使用者是否已登入，顯示不同的內容。
• 根據應用狀態顯示加載中、錯誤或數據顯示的不同狀態。
• 根據使用者權限顯示不同的 UI 元素。

範例：登入狀態應用

class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isLoggedIn: false };
  }

  handleLoginClick = () => {
    this.setState({ isLoggedIn: true });
  };

  handleLogoutClick = () => {
    this.setState({ isLoggedIn: false });
  };

  render() {
    const isLoggedIn = this.state.isLoggedIn;

    let button;
    if (isLoggedIn) {
      button = <LogoutButton onClick={this.handleLogoutClick} />;
    } else {
      button = <LoginButton onClick={this.handleLoginClick} />;
    }

    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />
        {button}
      </div>
    );
  }
}

這個範例展示了如何根據登入狀態來切換不同的按鈕和顯示不同的問候語。

---

總結

• if 語句 可以用於處理複雜的條件邏輯。
• 三元運算符 適合用於簡單的條件渲染。
• 邏輯 && 運算符 允許根據條件選擇性渲染。
• 返回 null 可以防止組件渲染。
• 條件渲染是 React 應用中常見的設計模式，靈活地控制 UI 渲染可以提高應用的可維護性和擴展性。

透過這些條件渲染技術，可以根據應用的狀態和使用者互動，動態地控制 React 組件的顯示內容。