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: –
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.