巧用 8 种方法在 React 中实现条件渲染

2024-01-06 08:27:00

条件渲染：React 中创建动态 UI 的强大技术

在 React 中，条件渲染是一种非常强大的技术，可以根据特定条件渲染某些组件或元素。通过巧妙地使用条件渲染，你可以创建动态且响应迅速的用户界面，根据用户的输入或应用程序状态的变化进行调整。

本文将深入探讨 React 中八种常见的条件渲染方法，并提供清晰易懂的代码示例和最佳实践指南。

八种条件渲染方法

1. 三元运算符

三元运算符是用于条件渲染的最简单方法之一。它采用以下语法：

{条件 ? 真值 : 假值}

例如，假设我们有一个按钮，需要根据用户是否已登录来显示“注销”或“登录”文本。我们可以使用三元运算符来实现这一点：

const Button = () => {
  const isLoggedIn = true;

  return (
    {isLoggedIn ? <LogoutButton /> : <LoginButton />}
  );
};

2. if else 语句

if else 语句是另一种常用的条件渲染方法。它采用以下语法：

if (条件) {
  // 真值代码块
} else {
  // 假值代码块
}

例如，假设我们有一个标题，需要根据用户角色显示不同的消息。我们可以使用 if else 语句来实现这一点：

const Header = () => {
  const userRole = 'admin';

  return (
    {userRole === 'admin' ? <h1>欢迎管理员！</h1> : <h1>欢迎用户！</h1>}
  );
};

3. switch 语句

switch 语句用于根据条件执行多个代码块。它的语法如下：

switch (表达式) {
  case 值1:
    // 代码块 1
    break;
  case 值2:
    // 代码块 2
    break;
  default:
    // 默认代码块
}

例如，假设我们有一个菜单，需要根据用户选择的语言显示不同的选项。我们可以使用 switch 语句来实现这一点：

const Menu = () => {
  const language = 'en';

  return (
    switch (language) {
      case 'en':
        return <EnglishMenu />;
      case 'es':
        return <SpanishMenu />;
      default:
        return <DefaultMenu />;
    }
  );
};

4. && 逻辑运算符

&& 逻辑运算符用于仅在条件为 true 时渲染元素。它的语法如下：

{条件 && 元素}

例如，假设我们有一个输入字段，只有在用户验证成功后才需要显示。我们可以使用 && 逻辑运算符来实现这一点：

const InputField = () => {
  const isVerified = true;

  return (
    {isVerified && <input type="text" />}
  );
};

5. 三元运算符与 && 逻辑运算符结合使用

三元运算符和 && 逻辑运算符可以组合使用，以创建更复杂的条件渲染。例如，假设我们有一个按钮，只有在用户既已登录又已验证时才需要显示“编辑”文本。我们可以使用三元运算符和 && 逻辑运算符来实现这一点：

const Button = () => {
  const isLoggedIn = true;
  const isVerified = true;

  return (
    {isLoggedIn && isVerified ? <EditButton /> : <ViewButton />}
  );
};

6. 渲染属性

渲染属性允许你将条件渲染逻辑作为属性传递给组件。它的语法如下：

<组件 render={条件 ? () => {} : () => {}} />

例如，假设我们有一个列表，需要根据用户是否选择了“显示已完成的任务”来显示已完成的任务或所有任务。我们可以使用渲染属性来实现这一点：

const TaskList = ({ showCompleted }) => {
  return (
    <ul>
      {tasks.map((task) => (
        <li render={showCompleted && task.completed ? () => task.name : () => null} />
      ))}
    </ul>
  );
};

7. CSS 类

CSS 类可以用于根据条件显示或隐藏元素。例如，假设我们有一个元素，需要在用户单击按钮时显示。我们可以使用 CSS 类来实现这一点：

const Element = () => {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <div className={isVisible ? 'visible' : 'hidden'}>
      内容
    </div>
  );
};