学习React (2) - React 基础 04 条件渲染

在React中，条件渲染是指根据特定条件动态地决定是否渲染某一组件或元素。条件渲染的方式与JavaScript中的条件语句类似，可以使用if语句、三元运算符、逻辑运算符等来实现。以下是几种常见的条件渲染方法：

使用 if 语句

你可以在渲染函数中使用普通的 if 语句来基于条件显示不同的内容。

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  } else {
    return <h1>Please sign up.</h1>;
  }
}

使用三元运算符

三元运算符是一种简洁的条件渲染方式，适用于简单的条件判断。

function Greeting(props) {
  return props.isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>;
}

使用逻辑 && 运算符

当条件为真时渲染某些组件，而条件为假时不渲染任何内容，可以使用逻辑 && 运算符。

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 && (
        <h2>You have {unreadMessages.length} unread messages.</h2>
      )}
    </div>
  );
}

使用 switch 语句

对于多条件的情况，可以使用 switch 语句来处理条件渲染。

function UserGreeting() {
  return <h1>Welcome back!</h1>;
}

function GuestGreeting() {
  return <h1>Please sign up.</h1>;
}

function Greeting(props) {
  switch (props.status) {
    case 'loggedIn':
      return <UserGreeting />;
    case 'loggedOut':
      return <GuestGreeting />;
    default:
      return <h1>Hello! Who are you?</h1>;
  }
}

阻止组件渲染

有时候你可能希望阻止组件的渲染，返回 null 即可达到此目的。

function WarningBanner(props) {
  if (!props.warn) {
    return null; // 不会渲染任何东西
  }

  return <div className="warning">Warning!</div>;
}

条件渲染示例

下面是一个综合示例，展示了如何基于不同条件动态渲染组件：

import React, { useState } from 'react';

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

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

function Greeting(props) {
  if (props.isLoggedIn) {
    return <h1>Welcome back!</h1>;
  } else {
    return <h1>Please sign up.</h1>;
  }
}

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

  const handleLoginClick = () => {
    setIsLoggedIn(true);
  };

  const handleLogoutClick = () => {
    setIsLoggedIn(false);
  };

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

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

export default App;

总结

• 条件渲染是在React中根据条件动态地决定渲染内容的技术。
• 可以使用 if 语句、三元运算符、逻辑 && 运算符和 switch 语句等多种方式实现条件渲染。
• 返回 null 可以阻止组件渲染。

通过掌握这些技巧，你可以在React应用中实现丰富的交互和动态内容。希望以上内容对你有帮助！如果有更多问题，请随时提问。