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

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

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

а потом в второй учебник, "мышление в react":

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

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

5 73
javascript reactjs

5 ответов:

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

var obj = {__html: rawMarkup};

<span dangerouslySetInnerHTML={obj} />
80

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

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

По данным реагировать официальная документация атрибут стиля принимает JavaScript object вместо строки CSS.

5

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

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

именно по этой причине есть две пары фигурных скобок

3

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

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

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

3

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

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

равна

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

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

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

0