为什么我不能在元素标签中包含 JSX 注释？

Question

我正在遵循将多属性标签分成多行的常见模式，例如。

<div
  className="foo"
  style={{ fontWeight: "bold" }}
/>

我想在该声明中添加注释，例如。

<div
  className="foo"
  {/* This is only temporary */}
  style={{ fontWeight: "bold" }}
/>

但是上面的语法不起作用；我得到：

SyntaxError: Unexpected token, expected ... (45:96)

（指向 temporary */} 中的结尾 }。）是否可以在 JSX 的标签内添加注释，如果可以，我应该使用什么语法？

Answer 1

我认为你混淆了 props 和 children。当你这样做时：

<div
  className="foo"
  {/* bar */}
>

您正在尝试使用内联 JSX 表达式，就像您在开始标记内传递 props 一样，这是不允许的。当你有一个元素时，开始标签可以 只包含解构的 object 或 prop=value 值，因此它期望 ... 解构一个 object 带有属性和值，例如：

const props = {
    className: "foo"
}

<div {...props}>

您不能在标签内发表评论，因为该标签不允许内联 JSX 表达式。 JSX 表达式只允许作为 children:

{/* bar */}
<div
  className="foo"
>

在此示例中，表达式不在元素的开始标记内，并且允许。

Answer 2

简短的回答是 "you can't"，但有多种方法可以伪造它。我认为最简单的方法是搭载另一个值：

<img
  alt={"settings link"
  /* This is just temporary */}
  src="http://www.example.com/foo.jpg"
/>

它不是最清晰的，但我们所做的只是将支撑向上移动了一行。这将 "settings link" 从 HTML 风格的 JSX 值转换为 Javascript 表达式，它恰好有一个注释。

它的优点是将评论绑定到单个属性，而不是整个标签。我认为这更清楚；如果你真的想对标签发表评论，最好将其移至顶部。

如果您的目标是注释掉某些属性，是的，那有点晦涩难懂。但是当你有时间取消评论时应该足够清楚。

Answer 3

您可以像这样在 JSX 标签内评论：

<div
  className="foo"
  /* This is only temporary */
  style={{ fontWeight: "bold" }}
/>

注意：没有“{”和“}”

我记得在 the official document few years ago 看过这篇文章，但他们重写了文档后，我再也找不到了。

Why can't I have a JSX comment inside an element tag?