为什么 if 语句条件（props）不应该在 React 组件中的大括号内？

Question

我正在阅读 React 文档，在“props”部分，他们有一个解决方案，该解决方案采用 size 属性并将其传递到 if 语句的条件内。为什么这里的花括号内没有“大小”？根据 JSX，道具不应该位于花括号内吗？我对 React 和 JSX 还很陌生。

Answer 1

在 JSX 中，当您使用大括号 {} 时，它用于嵌入 JavaScript 表达式。对于您提供的 Avatar 组件， size 属性不在大括号内，因为它直接在 JSX 标记中用作变量。

当您需要计算或引用 JavaScript 变量、表达式或函数时，JSX 语法允许您使用花括号嵌入 JavaScript 表达式。然而，并非 JSX 中每次使用 prop 或变量都需要大括号。

在您的示例中：

<img
  className="avatar"
  src={getImageUrl(person, thumbnailSize)}
  alt={person.size}
  width={size}
  height={size}
/>

这里，width={size} 和 height={size} 直接在 JSX 中使用 size 属性，并且不需要用大括号括起来，因为它是一个简单的变量引用。

另一方面，如果您有更复杂的东西，例如条件渲染或 JavaScript 表达式，那么您将使用花括号。 例如：

<img
  className="avatar"
  src={getImageUrl(person, thumbnailSize)}
  alt={person.size}
  width={size > 90 ? size : 90}
  height={size > 90 ? size : 90}
/>

在上面的例子中，宽度和高度值由 JavaScript 表达式确定（size > 90 ? size : 90），因此它们用花括号括起来。

综上所述，在 JSX 中，当需要嵌入 JavaScript 表达式时，可以使用大括号 {}，但对于简单的变量引用或 prop 值，可以直接使用它们，而无需使用大括号。