Какова цель двойных фигурных скобок в синтаксисе React.js JSX?

Из answer.js учебника мы видим это использование двойных фигурных скобок:

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

И затем в втором учебнике "Мышление в реакции" :

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

Однако документация React JSX не описывает или не упоминает двойные фигурные скобки. Для чего этот синтаксис (двойные завитки)? И есть ли другой способ выразить одно и то же в jsx или это просто упущение из документации?

Ответы

Ответ 1

Это просто литерал объекта, встроенный в значение prop. Это то же самое, что

var obj = {__html: rawMarkup};

<span dangerouslySetInnerHTML={obj} />

Ответ 2

Я пытаюсь сказать это простыми словами, чтобы быть понятным для всех. Код ниже:

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

равно

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

Итак, просто мы должны использовать выражение React, если мы собираемся назначить литеральный объект для свойства.

Для некоторых людей, которые в основном перемещаются из AngularJs в ReactJs, это, вероятно, является частью путаницы с оператором привязки выражения AngularJs {{}}. Итак, попробуйте взглянуть на это иначе в ReactJs.