React 的 JSX 语法中双花括号的目的是啥？

Posted 2023-02-21

【中文标题】React 的 JSX 语法中双花括号的目的是啥？

【英文标题】：What is the purpose of double curly braces in React's JSX syntax?React 的 JSX 语法中双花括号的目的是什么？

【发布时间】：2014-05-05 11:31:16

【问题描述】：

从react.js tutorial 我们看到双花括号的这种用法：

<span dangerouslySetInnerhtml= __html: rawMarkup  />

然后在the second tutorial, "Thinking in react"：

 <span style= color: 'red' >
     this.props.product.name
 </span>;

但是，React JSX documentation 没有描述或提及双花括号。这个语法（双花括号）是干什么用的？是否有另一种方法可以在 jsx 中表达相同的内容，或者这只是文档中的遗漏？

【问题讨论】：

来自文档The exterior set of curly braces are letting JSX know you want a JS expression. The interior set of curly braces represent a javascript object, meaning you’re passing in a object to the style attribute.

【参考方案1】：

这只是一种 JSX 语法表示法，普通 HTML 接受像 style="color:red" 这样的字符串的内联样式，但 JSX 语法不接受字符串形式的内联样式。我们必须动态地将它们作为对象传递，并且在 JSX 中嵌入 JavaScript 对象的唯一方法是使用 表示法，它为我们提供了类似 style=color:'red'

的语法

【参考方案2】：

color: 'red' 的语法用于style 标记，因为根据React doc，style 属性接受 JavaScript 对象 与 camelCased属性而不是 CSS 字符串。

<span style=color: 'red'>
    this.props.product.name
</span>;

【参考方案3】：

React 使用 JSX，在 JSX 中评估任何变量、状态对象、表达式等都必须包含在 中。

在 JSX 中提供内联样式时，必须将其指定为对象，因此它必须再次位于花括号内。 。

这就是有两对花括号的原因

【参考方案4】：

这意味着您可以只在对象中设置样式属性，而不是声明设置为预期样式属性的对象的样式变量...当您要添加的样式是但是对于需要更多样式的元素来说，声明样式变量会更简洁

例如，对于样式属性较少的元素，请执行此操作

<span style=color: 'red'>
  this.props.product.name
</span>

对于具有更多样式属性的 HTML 元素，请执行此操作

const spanStyle = 
   backgroundColor: 'red',
   color: 'grey',
   margin: '-25px'

然后你用jsx语法调用它

<span style=spanStyle>
  this.props.product.name
</span>

【参考方案5】：

我对双大括号的解释是样式对象只接受一个 JavaScript 对象，所以对象必须在单大括号内。

style=jsObj

样式工件的对象是键：值对（字典与数组），并且该对象表示为，例如，color:'#ffffff'。

所以你有：

style =  jsObj 

和

jsObj = color:'#ffffff'

就像在代数中一样，当你替换时，它代表：

style =  color:'#ffffff' 

【参考方案6】：

花括号在这里有两种用法：-

.. 计算结果为 JSX 中的表达式。 key: value 表示一个 javascript 对象。

让我们看一个简单的例子。

<Image source=pic style=width: 193/>

如果您观察到pic 被大括号包围。这就是 JSX 嵌入变量的方式。 pic 可以是任何 Javascript 表达式/变量/对象。 您也可以执行 2+3 之类的操作，它的计算结果为 5

让我们在这里剖析一下风格。 width: 193 是一个 Javascript 对象。 要将这个对象嵌入到 JSX 中，您需要花括号，因此， width: 193

注意：要在 JSX 中嵌入任何类型的 Javascript 表达式/变量/对象，您需要花括号。

【讨论】：

@RohitMandiwal 谢谢先生。我知道当你把一个花括号放在另一个花括号里面时会有点混乱。

对 React 中的双花括号的解释真是太棒了！非常感谢！我将投票这个答案作为最实用的解释。

【参考方案7】：

我尽量用简单的语言来讲述，以便每个人都能理解。以下代码：

<span dangerouslySetInnerHTML=__html: rawMarkup />

等于

<span 
     dangerouslySetInnerHTML= __html: rawMarkup  
/>

因此，如果我们要将 文字对象 分配给属性，我们应该使用 React 表达式。

对于一些主要从 AngularJs 迁移到 ReactJs 的人来说，这可能是与 AngularJs 的表达式绑定运算符 混淆的一部分。因此，请尝试在 ReactJs 中以不同的方式看待它。

【讨论】：

你的两个代码片段除了格式之外似乎完全一样。

@jcollum - 这正是他的观点。双括号“运算符”不是他所展示的运算符。它在 html 模板引擎中很常见，以至于在反应中看起来很奇怪。

我还是不明白

@AndrewLam - 刚刚编辑它。你现在明白了吗？

【参考方案8】：

它只是一个内联在 prop 值中的对象字面量。是一样的

var obj = __html: rawMarkup;

<span dangerouslySetInnerHTML=obj />

【讨论】：

@BenAlpert 有时间我会很高兴。奇怪的是，我实际上很喜欢编辑文档（以前曾是一家法律期刊的编辑），并且可能还有其他一些改进。 PS，还住在博尔德吗？让我们找个时间喝杯咖啡或吃午饭吧……很高兴认识一个对 React 有内幕消息的人，因为我们刚刚开始用它来做一个大项目。

@BenRoberts 太好了，谢谢！不幸的是，这些天我不在加利福尼亚，但请随时访问 freenode 上的#reactjs IRC 房间，我很乐意回答问题。

@BenAlpert 您是否知道将其设为dangerouslySetInnerHTML=__html: rawMarkup 而不是dangerouslySetInnerHTML=rawMarkup 背后的想法？是不是因为对象__html: rawMarkup 是可变的而字符串不是？

@Brian：见github.com/facebook/react/issues/2256#issuecomment-63031960（和github.com/facebook/react/blob/…）。