在 React 的 JSX 语法中使用双花括号的目的是什么？

从 React.js 教程中我们可以看到双花括号的用法:

<span dangerouslySetInnerHTML={{ __html: rawMarkup }} />

然后在 第二个教程「反应式思考」:

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

但是，响应 JSX 文档没有描述或提到双花括号。这个语法(双曲线)是用来干什么的？在 jsx 中是否还有其他方法来表达同样的内容，或者这只是文档中的一个省略？

53757 次浏览
小开
最佳答案

它只是一个内联在道具值中的对象文字

var obj = {__html: rawMarkup};


<span dangerouslySetInnerHTML={obj} />
小开

我试着用简单的语言来表达，让每个人都能理解。以下代码:

<span dangerouslySetInnerHTML=\{\{__html: rawMarkup}} />

等于

<span
dangerouslySetInnerHTML={ {__html: rawMarkup} }
/>

因此，如果我们要将 字面意思赋给一个属性，我们应该简单地使用 React 表达式。

对于一些主要从 AngularJs 迁移到 ReactJs 的人来说，这可能是与 AngularJs 的表达式绑定操作符 \{\{ }}混淆的一部分。所以，试着在 ReactJ 中用不同的眼光看待它。

小开

style标记中使用了 \{\{color: 'red'}}的语法，因为根据 反应医生，style属性接受具有 camelCased 属性的 < strong > JavaScript 对象 ，而不是 < strong > CSS string 。

<span style=\{\{color: 'red'}}>
{this.props.product.name}
</span>;
小开

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

  1. { . . }计算为 JSX 中的表达式。
  2. { key: value }意味着一个 javascript 对象。

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

<Image source={pic} style=\{\{width: 193}}/>

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

我们来分析一下风格。 {width: 193}是一个 Javascript 对象。 要在 JSX 中嵌入这个对象，需要使用大括号，因此需要使用 { {width: 193} }

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

小开

React 使用 JSX，在 JSX 中，任何变量、状态对象、表达式等的求值都必须包含在{}中。

在 JSX 中给出内联样式时，它必须被指定为一个对象，所以它必须再次位于大括号内。{}.

这就是为什么有两对花括号

小开

我对双花括号的解释是样式对象只接受一个 JavaScript 对象，因此该对象必须位于单花括号内。

style={jsObj}

样式工件的对象是键: 值对(dictionary 对阵列) ，该对象表示为，例如 {color:'#ffffff'}。

所以你有:

style = { jsObj }

还有

jsObj = {color:'#ffffff'}

就像代数一样，当你用代数的时候，它表示:

style = { {color:'#ffffff'} }
小开

这意味着不需要声明一个样式变量来设置一个对象的样式属性，你只需要在一个对象中设置样式属性... 这通常是一个最佳实践，当你想要添加的样式很少，但是对于一个需要更多样式的元素来说，声明一个样式变量会更干净

例如，对于样式属性较少的元素，可以这样做

<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>
小开

这只是一个 JSX 语法符号，普通 HTML 接受带有字符串(如 style="color:red")的内联样式，但 JSX 语法不接受字符串形式的内联样式。我们必须动态地将它们作为对象传递，在 JSX 中嵌入 JavaScript 对象的唯一方法是使用{}符号，它给我们提供了类似于 style=\{\{color:'red'}}的语法

小开

两组大括号是因为我们想在那里提供一个对象，就像这样:

function App() {
return <input style=\{\{ border: '3px solid red' }} />
}


root.render(<App />);
小开

两个步骤:

JsObj = { color:’# ffffff’}//第一组大括号

Style = { jsObj }//第二组大括号

或者一步:

style = { {color:'#ffffff'} } // First & second sets of braces together

正如喇嘛所说: “这不是很容易吗?”


提交答案