web-dev-qa-db-fra.com

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

Du tutoriel react.js nous voyons cette utilisation des accolades doubles:

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

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

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

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

javascriptreactjs
89
Ben Roberts

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

var obj = {__html: rawMarkup};

<span dangerouslySetInnerHTML={obj} />
98
Felix Kling

Les accolades ont 2 utilisations ici: -

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

Voyons un exemple simple.

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

Si vous observez que pic est entouré d'accolades. C'est la manière JSX d'incorporer une variable. pic peut ê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, donc, { {width: 193} }

Remarque: Pour incorporer tout type d'expression/variable/objet Javascript dans JSX, vous avez besoin d'accolades.

27
Mav55

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

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

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

11
Andrew Lam Yat Weng

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

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

C'est la raison pour laquelle il y a deux paires d'accolades bouclées

5
Sumer

J'essaie de le dire en termes simples pour que tout le monde puisse le comprendre. Le code ci-dessous:

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

est égal à

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

Donc, nous devons simplement utiliser React expression 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 AngularJs {{}}. Alors, essayez de voir les choses différemment dans ReactJs.

0
Ehsan