React的JSX语法中的双花括号的目的是什么? [英] What is the purpose of double curly braces in React's JSX syntax?

问题描述

在 react.js教程中，我们看到了双花括号的这种用法:

From the react.js tutorial we see this usage of double curly braces:

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

然后在第二个教程思考中反应" :

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

但是，反应JSX文档没有描述或提及双大括号.此语法(双curies)的作用是什么?还有另一种方法可以在jsx中表达相同的东西，或者这仅仅是文档中的遗漏?

However, the React JSX documentation doesn't describe or mention double curly braces. What is this syntax (double curlies) for? And is there another way to express the same thing in jsx or is this just an omission from the documentation?

推荐答案

它只是在prop值中内联的对象文字.与

It's just an object literal inlined in the prop value. It's the same as

var obj = {__html: rawMarkup};

<span dangerouslySetInnerHTML={obj} />

这篇关于React的JSX语法中的双花括号的目的是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！