Quel est le but des doubles accolades dans la syntaxe JSX de React?

Dans le tutoriel react.js, nous voyons cette utilisation d’accolades doubles:

 

Et puis dans le second tutoriel, “Penser en réaction” :

   {this.props.product.name} ; 

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

C’est juste un littéral d’object incorporé dans la valeur de prop. C’est pareil que

 var obj = {__html: rawMarkup};  

Au cas où vous ne le sauriez pas, pourquoi {{color: 'red'}} est-il utilisé dans la balise de style

  {this.props.product.name} ; 

Selon la documentation officielle de React , l’atsortingbut de style accepte un object JavaScript plutôt qu’une chaîne CSS.

React utilise JSX, Dans JSX, toute variable, object d’état, expression, etc. doit être entouré de {}.

Tout en donnant des styles en ligne dans JSX, il doit être spécifié en tant qu’object pour qu’il soit à nouveau entre accolades. {}.

C’est la raison pour laquelle il y a deux paires d’accolades

Les accolades ont 2 usages ici: –

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

Laissez voir un exemple simple.

Si vous observez pic est entouré d’accolades. C’est la façon dont JSX incorpore les variables. pic peut être n’importe quelle expression / variable / object Javascript. Vous pouvez également faire quelque chose comme {2 + 3} et il sera évalué à {5}

Disséquons le style ici. {width: 193} est un object Javascript. Et pour incorporer cet object dans JSX, vous avez besoin d’accolades, donc { {width: 193} }

Remarque: pour intégrer des expressions / variables / objects Javascript dans JSX, vous avez besoin d’accolades.

J’essaie de le dire en termes simples pour être compréhensible pour tout le monde. Le code ci-dessous:

est égal à

  

Donc, nous devons simplement utiliser l’expression Réagir si nous allons assigner un object littéral à une propriété.

Pour certaines personnes passant principalement d’AngularJ à ReactJs, cela est probablement dû à la confusion avec l’opérateur de liaison d’expression {{}} d’ AngularJs. Donc, essayez de regarder différemment dans ReactJs.