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

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

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

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

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

Answer 2

简短的回答是"你不能",但有各种方法来伪造它.我认为最简单的是捎带另一个价值:

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

它有点不太清晰,但我们所做的就是将支撑向上移动一行.这将"设置链接"从HTML格式的JSX值转换为Javascript表达式,恰好有一个评论.

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

如果你的目标是评论一些属性,是的,这有点模糊.但是当你接触它时,它应该足够明确地取消评论.