跳到主要内容

条件渲染

介绍​

在 React 中，条件渲染是一种根据特定条件动态显示或隐藏组件或元素的技术。它允许开发者根据应用程序的状态或用户交互来决定渲染哪些内容。条件渲染是构建动态和交互式用户界面的核心概念之一。

基本用法​

在 React 中，条件渲染可以通过多种方式实现。最常见的方式是使用 JavaScript 的 if 语句、三元运算符或逻辑与 (&&) 运算符。

使用 if 语句​

最简单的条件渲染方式是使用 if 语句。例如，假设我们有一个组件，根据用户是否登录来显示不同的内容：

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

在这个例子中，isLoggedIn 是一个布尔值，根据它的值来决定渲染哪个 <h1> 元素。

使用三元运算符​

三元运算符是另一种常见的条件渲染方式。它非常适合在 JSX 中内联使用：

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

三元运算符的语法是 condition ? expression1 : expression2。如果 condition 为 true，则返回 expression1，否则返回 expression2。

使用逻辑与 (&&) 运算符​

逻辑与 (&&) 运算符通常用于在条件为 true 时渲染某些内容，而在条件为 false 时不渲染任何内容：

jsx
function Notification({ hasNewMessages }) {
  return (
    <div>
      {hasNewMessages && <p>You have new messages!</p>}
    </div>
  );
}

在这个例子中，如果 hasNewMessages 为 true，则渲染 <p>You have new messages!</p>，否则不渲染任何内容。

实际案例​

让我们通过一个实际案例来展示条件渲染的应用。假设我们正在构建一个简单的待办事项列表应用程序，用户可以选择显示或隐藏已完成的任务。

jsx
function TodoList({ todos, showCompleted }) {
  return (
    <ul>
      {todos.map(todo => (
        (showCompleted || !todo.completed) && (
          <li key={todo.id}>
            {todo.text} {todo.completed && <span>(Completed)</span>}
          </li>
        )
      ))}
    </ul>
  );
}

在这个例子中，todos 是一个包含待办事项的数组，每个待办事项都有一个 completed 属性。showCompleted 是一个布尔值，用于决定是否显示已完成的任务。如果 showCompleted 为 true，则显示所有任务；如果为 false，则只显示未完成的任务。

总结​

条件渲染是 React 中一个非常强大的功能，它允许我们根据应用程序的状态或用户交互来动态地显示或隐藏内容。通过使用 if 语句、三元运算符或逻辑与 (&&) 运算符，我们可以轻松地实现条件渲染。

附加资源​

练习​

  1. 创建一个 React 组件，根据用户是否在线显示不同的消息。
  2. 修改上面的待办事项列表示例，使其在用户点击按钮时切换显示已完成的任务。
提示

在编写条件渲染代码时，尽量保持代码简洁和可读性。如果条件逻辑变得复杂，考虑将其提取到一个单独的函数或组件中。