web-dev-qa-db-fra.com

Que signifient les accolades dans JSX (React)?

Par exemple, pour définir un style en réaction, vous pouvez le faire

var css = {color: red}

et

<h1 style={css}>Hello world</h1>

Pourquoi avez-vous besoin des accolades autour de CSS dans le deuxième extrait de code?

javascriptreactjsecmascript-6jsx
27
EverRip

Les accolades sont une syntaxe spéciale pour permettre à l'analyseur JSX de savoir qu'il doit interpréter le contenu entre eux comme JavaScript au lieu d'une chaîne.

Vous en avez besoin lorsque vous souhaitez utiliser une expression JavaScript comme une variable ou une référence dans JSX. Parce que si vous utilisez la syntaxe standard entre guillemets comme ceci:

var css = { color: red }

<h1 style="css">Hello world</h1>

JSX ne sait pas que vous vouliez utiliser la variable css dans l'attribut style au lieu de la chaîne. Et en plaçant les accolades autour de la variable css, vous dites à l'analyseur "de prendre le contenu de la variable css et de le mettre ici". (Techniquement son évaluation du contenu)

Ce processus est généralement appelé "interpolation".

35
Daniel Sandiego

Si vous n'utilisez pas la variable css, le JSX pourrait ressembler à ceci:

<h1 style={ {color: 'red'} }>Hello world</h1>

Je suppose que vous êtes confus au sujet des doubles accolades.

vous savez donc que les accolades en JSX signifie processing in a JavaScript way, les accolades extérieures sont donc utilisées exactement à cette fin.

Mais la propriété style accepte un object. Et un objet a également besoin d'une autre paire d'appareils orthopédiques pour l'envelopper. C'est le but des intérieurs.

14
Chang

Vous mettez des accolades lorsque vous souhaitez utiliser la valeur d'une variable à l'intérieur de "html" (donc à l'intérieur de la partie de rendu). C'est juste une façon de dire à l'application de prendre la valeur de la variable et de la mettre là, par opposition à un mot.

2
adinutzyc21