我遵循的是将多属性标记分成多行的常见模式,例如。
<div
className="foo"
style={{ fontWeight: "bold" }}
/>
我想在声明中添加一个注解,例如。
<div
className="foo"
{/* This is only temporary */}
style={{ fontWeight: "bold" }}
/>
但是上面的语法不起作用;我得到:
SyntaxError: Unexpected token, expected ... (45:96)
(指向temporary */}
中的结尾}
。)在JSX中是否可以在标记内添加注解,如果可以,应该使用什么语法?
3条答案
按热度按时间zwghvu4y1#
您可以在JSX标记中进行如下注解:
注:没有“{”和“}”
a live example in JSFiddle
我记得几年前在官方文件上看到过,但是他们重写文件后,我就找不到了。
f1tvaqid2#
简短的回答是“你不能”,但有很多方法可以伪造它。我认为最简单的方法是利用另一个价值观:
这不是很清楚,但我们所做的只是将大括号上移一行,将“设置链接”从HTML风格的JSX值转换为一个Javascript表达式,该表达式恰好包含一个注解。
它确实有一个优点,它把注解和单个属性联系起来,而不是把标签作为一个整体。如果你真的想评论这个标签,你最好把它移到顶部。
如果你的目标是注解掉某个属性,是的,这有点模糊,但是它应该足够清楚,当你开始做的时候可以取消注解。
r6vfmomb3#
我觉得你把 prop 和孩子搞混了。当你这么做的时候:
您正在尝试使用内联JSX表达式 ,就像您在开始标记内传递props 一样,这是不允许的。当您具有元素时,开始标记 * 只能包含解构的对象或
prop=value
* 值,因此它期望...
使用props和值解构对象,例如:您不能在标记内添加注解,因为标记不允许内联JSX表达式。JSX表达式仅允许作为子项:
在此示例中,表达式不在元素的开始标记内,因此是允许的。