Яка мета подвійних фігурних дужок у синтаксисі JSX React?

З підручника reakct.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. {key: value} передбачає об’єкт 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'} }