为什么我不能在元素标记中包含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

简短的回答是“你不能”，但有各种方法来伪造它。我认为最简单的是捎带另一个价值：

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

它比最佳清晰度稍差，但我们所做的只是将支撑向上移动了一行。这将“设置链接”从HTML格式的JSX值转换为Javascript表达式，恰好有评论。

它的优势在于它将注释与单个属性相关联，而不是整个标记。我认为这更清楚;如果你真的想对标签发表评论，你最好把它移到顶部。

如果你的目标是评论一些属性，是的，这有点模糊。但是当你谈到它时，它应该足够明确地取消评论。

Answer 2

您可以像这样在JSX标签内进行注释：

Android Studio

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

a live example in JSFiddle

我记得几年前在正式文档中读过这篇文章，但是在他们重写文档之后，我再也找不到了。

Answer 3

我认为你会混淆道具和孩子。当你这样做时：

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

您正在尝试使用内联JSX表达式，就好像您在开始标记内传递道具一样，这是不允许的。当你有一个元素时，开始标记只能包含解构对象或prop=value 值，因此它期望...使用道具和值来解构对象的原因，例如：

const props = {
    className: "foo"
}

<div {...props}>

您无法在代码中发表评论，因为代码不允许使用内联JSX表达式。 JSX表达式只允许作为子项使用：

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

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