v19.2Latest

条件渲染

你的组件通常需要根据不同的条件显示不同的内容。在 React 中，你可以使用 JavaScript 语法（如if 语句、&& 和 ? :运算符）来条件性地渲染 JSX。

你将学习
  • 如何根据条件返回不同的 JSX
  • 如何有条件地包含或排除一段 JSX
  • 你在 React 代码库中会遇到的条件语法快捷方式

条件返回 JSX

假设你有一个 PackingList 组件，它渲染多个 Item，这些项目可以被标记为已打包或未打包：

请注意，一些 Item 组件的 isPacked属性被设置为true 而不是 false。如果 isPacked={true}，你希望为已打包的项目添加一个勾选标记 (✅)。

你可以像这样写一个if/else 语句：

如果 isPacked属性为true，这段代码会返回一个不同的 JSX 树。经过这个更改，一些项目末尾会出现一个勾选标记：

尝试编辑任一情况下返回的内容，看看结果如何变化！

请注意，你正在使用 JavaScript 的if 和 return语句创建分支逻辑。在 React 中，控制流（如条件判断）是由 JavaScript 处理的。

使用 null 条件返回空内容

在某些情况下，你可能根本不想渲染任何内容。例如，假设你完全不想显示已打包的项目。组件必须返回一些内容。在这种情况下，你可以返回null：

如果isPacked为 true，组件将不返回任何内容，即null。否则，它将返回要渲染的 JSX。

在实践中，从组件返回null并不常见，因为这可能会让尝试渲染它的开发者感到意外。更常见的是，你会在父组件的 JSX 中有条件地包含或排除该组件。下面是如何做到这一点！

条件包含 JSX

在前面的例子中，你控制了组件将返回哪个（如果有的话！）JSX 树。你可能已经注意到渲染输出中存在一些重复：

与

这两个条件分支都返回 <li className="item">...</li>：

虽然这种重复没有害处，但它可能会让你的代码更难维护。如果你想更改 className怎么办？你必须在代码中的两个地方进行修改！在这种情况下，你可以有条件地包含一小段 JSX 来让你的代码更加DRY（不要重复自己）。

条件（三元）运算符 (? :)

JavaScript 有一种紧凑的语法来编写条件表达式——条件运算符或“三元运算符”。

与其这样写：

你可以这样写：

你可以将其理解为“如果isPacked为真，则 (?) 渲染name + ' ✅'，否则 (:) 渲染name”。

Deep Dive
这两个示例完全等价吗？

现在假设你想将已完成项目的文本包装到另一个 HTML 标签中，例如<del>以添加删除线。你可以添加更多换行和括号，以便更容易在每个分支中嵌套更多 JSX：

这种风格适用于简单的条件，但要适度使用。如果你的组件因为嵌套了太多条件标记而变得混乱，请考虑提取子组件来清理代码。在 React 中，标记是你代码的一部分，因此你可以使用变量和函数等工具来整理复杂的表达式。

逻辑与运算符 (&&)

你会遇到的另一个常见快捷方式是JavaScript 逻辑与 (&&) 运算符。在 React 组件内部，当你希望在条件为真时渲染一些 JSX，否则不渲染任何内容时，它经常出现。使用&&，你可以仅在 isPacked 为 true时有条件地渲染勾选标记：

你可以将其理解为“如果isPacked为真，则 (&&) 渲染勾选标记，否则，不渲染任何内容”。

以下是实际效果：

一个JavaScript && 表达式 会在左侧（我们的条件）为 true时返回右侧的值（在我们的例子中是勾选标记）。但如果条件为false，整个表达式会变为 false。React 将false视为 JSX 树中的一个“空洞”，就像null 或 undefined一样，并且不会在其位置渲染任何内容。

陷阱

不要在 &&的左侧放置数字。

为了测试条件，JavaScript 会自动将左侧转换为布尔值。但是，如果左侧是0，那么整个表达式就会得到该值 (0)，而 React 会愉快地渲染0而不是什么都不渲染。

例如，一个常见的错误是编写像 messageCount && <p>New messages</p> 这样的代码。很容易假设当 messageCount 为 0时它什么都不渲染，但实际上它渲染的是0本身！

要修复它，请将左侧设为布尔值：messageCount > 0 && <p>New messages</p>。

有条件地将 JSX 赋值给变量

当快捷方式妨碍编写清晰的代码时，可以尝试使用if 语句和变量。你可以重新赋值使用 let定义的变量，所以首先提供你想要显示的默认内容，即名称：

使用 if 语句，在 isPacked 为 true时，将一个 JSX 表达式重新赋值给itemContent：

花括号打开了“通往 JavaScript 世界的窗口”。在返回的 JSX 树中使用花括号嵌入该变量，将之前计算好的表达式嵌套在 JSX 内部：

这种风格最为冗长，但也最为灵活。以下是实际效果：

和之前一样，这不仅适用于文本，也适用于任意的 JSX：

如果你不熟悉 JavaScript，一开始可能会觉得这些多样的风格令人不知所措。然而，学习它们将帮助你阅读和编写任何 JavaScript 代码——而不仅仅是 React 组件！开始时选择你偏爱的一种，如果忘记了其他方式的工作原理，可以再来查阅这份参考。

回顾

  • 在 React 中，你可以使用 JavaScript 来控制分支逻辑。
  • 你可以使用 if语句有条件地返回一个 JSX 表达式。
  • 你可以将有条件的 JSX 保存到变量中，然后通过花括号将其包含在其他 JSX 中。
  • 在 JSX 中，{cond ? <A /> : <B />} 表示 “如果cond为真，则渲染<A />，否则渲染<B />”。
  • 在 JSX 中，{cond && <A />} 表示 “如果cond为真，则渲染<A />，否则不渲染任何内容”。
  • 这些快捷方式很常见，但如果你更喜欢普通的 if语句，也可以不使用它们。

尝试一些挑战

Challenge 1 of 3:使用 ? : 为未完成项显示图标#

使用条件运算符 (cond ? a : b) 在 isPacked 不为 true 时渲染 ❌。

上一篇向组件传递 Props下一篇渲染列表