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

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

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

А затем во втором уроке «Думая, реагируя» :

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

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

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

var obj = {__html: rawMarkup};

<span dangerouslySetInnerHTML={obj} />

У фигурных скобок здесь есть 2 использования: -

1. {..} вычисляет выражение в JSX.
2. {ключ: значение} подразумевает объект javascript.

Посмотрим на простом примере.

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

Если вы наблюдаете pic, окружен скобами. Это способ встраивания переменной в JSX. picможет быть любым выражением / переменной / объектом Javascript. Вы также можете сделать что-то вроде {2 + 3}, и результат будет равен {5}

Давайте рассмотрим здесь стиль. {width: 193}является объектом Javascript. А чтобы встроить этот объект в JSX, вам понадобятся фигурные скобки, следовательно,{ {width: 193} }

Примечание. Чтобы встроить любое выражение / переменную / объект Javascript в JSX, вам потребуются фигурные скобки.

Если вы не знали, почему {{color: 'red'}}используется в styleтеге

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

Согласно официальной документации React , атрибут style принимает объект JavaScript, а не строку CSS.

React использует JSX. В JSX любая переменная, объект состояния, выражение и т. Д. Должны быть заключены в {}.

При задании встроенных стилей в JSX он должен быть указан как объект, поэтому он снова должен быть внутри фигурных скобок. {}.

Это причина того, что есть две пары фигурных скобок.

это означает, что вместо объявления переменной стиля, которая установлена ​​для объекта предполагаемых свойств стиля, вы можете вместо этого просто установить свойства стиля в объекте ... обычно это лучшая практика, когда стилей, которые вы хотите добавить, мало, однако для элемент, который требует большего стиля, проще объявить переменную стиля

например, для элемента с меньшим количеством свойств стиля сделайте это

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

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

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

равно

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

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

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

Моя интерпретация двойных фигурных скобок заключается в том, что объект стиля принимает только объект JavaScript, поэтому объект должен находиться внутри одинарных фигурных скобок.

style={jsObj}

Объект для артефактов стиля состоит из пар ключ: значение (словарь по сравнению с массивом), и этот объект выражается, например, как {color:'#ffffff'}.

Итак, у вас есть:

style = { jsObj }

и

jsObj = {color:'#ffffff'}

Как и в алгебре, когда вы подставляете, это означает:

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