reactjs 为什么我不能在元素标记中有一个JSX注解?

ggazkfy8  于 2023-01-12  发布在  React
关注(0)|答案(3)|浏览(97)

我遵循的是将多属性标记分成多行的常见模式,例如。

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

我想在声明中添加一个注解,例如。

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

但是上面的语法不起作用;我得到:

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

(指向temporary */}中的结尾}。)在JSX中是否可以在标记内添加注解,如果可以,应该使用什么语法?

zwghvu4y

zwghvu4y1#

您可以在JSX标记中进行如下注解:

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

注:没有“{”和“}”
a live example in JSFiddle
我记得几年前在官方文件上看到过,但是他们重写文件后,我就找不到了。

f1tvaqid

f1tvaqid2#

简短的回答是“你不能”,但有很多方法可以伪造它。我认为最简单的方法是利用另一个价值观:

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

这不是很清楚,但我们所做的只是将大括号上移一行,将“设置链接”从HTML风格的JSX值转换为一个Javascript表达式,该表达式恰好包含一个注解。
它确实有一个优点,它把注解和单个属性联系起来,而不是把标签作为一个整体。如果你真的想评论这个标签,你最好把它移到顶部。
如果你的目标是注解掉某个属性,是的,这有点模糊,但是它应该足够清楚,当你开始做的时候可以取消注解。

r6vfmomb

r6vfmomb3#

我觉得你把 prop 和孩子搞混了。当你这么做的时候:

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

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

const props = {
    className: "foo"
}

<div {...props}>

您不能在标记内添加注解,因为标记不允许内联JSX表达式。JSX表达式仅允许作为子项:

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

在此示例中,表达式不在元素的开始标记内,因此是允许的。

相关问题