À quoi servent les doubles accolades dans la syntaxe JSX de React?

À partir du didacticiel react.js, nous voyons cette utilisation des doubles accolades:

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

Et puis dans le deuxième tutoriel, "Penser en réagir" :

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

Cependant, la documentation React JSX ne décrit ni ne mentionne les doubles accolades. A quoi sert cette syntaxe (double curlies)? Et y a-t-il un autre moyen d'exprimer la même chose dans jsx ou est-ce juste une omission de la documentation?

C'est juste un objet littéral incorporé dans la valeur de prop. C'est la même chose que

var obj = {__html: rawMarkup};

<span dangerouslySetInnerHTML={obj} />

Les accolades bouclées ont 2 utilisations ici: -

1. {..} donne une expression dans JSX.
2. {key: value} implique un objet javascript.

Voyons un exemple simple.

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

Si vous observez picest entouré d'accolades. C'est la manière JSX d'incorporer des variables. picpeut être n'importe quelle expression / variable / objet Javascript. Vous pouvez également faire quelque chose comme {2 + 3} et il sera évalué à {5}

Disséquons le style ici. {width: 193}est un objet Javascript. Et pour intégrer cet objet dans JSX, vous avez besoin d'accolades, par conséquent,{ {width: 193} }

Remarque: pour intégrer tout type d'expression / variable / objet Javascript dans JSX, vous avez besoin d'accolades.

Au cas où vous ne saviez pas, pourquoi {{color: 'red'}}est utilisé dans la stylebalise

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

Selon la documentation officielle de React , l'attribut style accepte un objet JavaScript plutôt qu'une chaîne CSS.

React utilise JSX. Dans JSX, toute variable, objet d'état, expression, etc. doit être inclus dans {}.

Tout en donnant des styles en ligne dans JSX, il doit être spécifié comme un objet, il doit donc être à nouveau entre accolades. {}.

C'est la raison pour laquelle il existe deux paires d'accolades

cela signifie qu'au lieu de déclarer une variable de style qui est définie sur un objet des propriétés de style prévues, vous pouvez simplement définir les propriétés de style dans un objet ... c'est généralement une meilleure pratique lorsque les styles que vous souhaitez ajouter sont peu nombreux cependant pour un élément qui a besoin de plus de style, il est plus propre de déclarer une variable de style

par exemple, pour un élément avec moins de propriétés de style, procédez comme suit

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

pour l'élément HTML avec plus de propriétés de style, procédez comme suit

const spanStyle = {
   backgroundColor: 'red',
   color: 'grey',
   margin: '-25px'
}

alors vous l'appelez avec la syntaxe jsx

<span style={spanStyle}>
  {this.props.product.name}
</span>

J'essaie de le dire avec des mots simples pour être compréhensible par tout le monde. Le code ci-dessous:

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

est égal à

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

Donc, nous devrions simplement utiliser l'expression React si nous allons affecter un objet littéral à une propriété.

Pour certaines personnes qui passent principalement d'AngularJs à ReactJs, cela fait probablement partie de la confusion avec l'opérateur de liaison d'expression des AngularJs {{}} . Alors, essayez de le regarder différemment dans ReactJs.

Mon interprétation des doubles accolades est que l'objet de style n'accepte qu'un objet JavaScript, donc l'objet doit être à l'intérieur de simples accolades.

style={jsObj}

L'objet des artefacts de style est composé de paires clé: valeur (dictionnaire par rapport à un tableau) et cet objet est exprimé comme, par exemple {color:'#ffffff'},.

Donc vous avez:

style = { jsObj }

et

jsObj = {color:'#ffffff'}

Tout comme en algèbre, lorsque vous remplacez, cela signifie que:

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