JavaScript dans JSX avec les accolades

JSX vous permet d'écrire un balisage de type HTML dans un fichier JavaScript, en gardant la logique de rendu et le contenu au même endroit. Parfois, vous voudrez ajouter un peu de logique JavaScript ou référencer une propriété dynamique à l'intérieur de ce balisage. Dans cette situation, vous pouvez utiliser des accolades dans votre JSX pour ouvrir une fenêtre sur JavaScript.

Passer des chaînes avec des guillemets

Lorsque vous voulez passer un attribut de type chaîne à JSX, vous le mettez entre guillemets simples ou doubles :

Ici,"https://i.imgur.com/7vQD0fPs.jpg"et"Gregorio Y. Zara"sont passés en tant que chaînes.

Mais que faire si vous voulez spécifier dynamiquement lesrcou le textealt? Vous pouvezutiliser une valeur de JavaScript en remplaçant"et"par{et}:

Notez la différence entreclassName="avatar", qui spécifie un nom de classe CSS"avatar"qui rend l'image ronde, etsrc={avatar}qui lit la valeur de la variable JavaScript appeléeavatar. C'est parce que les accolades vous permettent de travailler avec JavaScript directement dans votre balisage !

Utiliser les accolades : une fenêtre sur le monde JavaScript

JSX est une manière spéciale d'écrire du JavaScript. Cela signifie qu'il est possible d'utiliser JavaScript à l'intérieur — avec des accolades{ }. L'exemple ci-dessous déclare d'abord un nom pour le scientifique,name, puis l'intègre avec des accolades à l'intérieur du<h1>:

Essayez de changer la valeur dename de 'Gregorio Y. Zara'en'Hedy Lamarr'. Voyez-vous comment le titre de la liste change ?

Toute expression JavaScript fonctionnera entre les accolades, y compris les appels de fonction commeformatDate():

Où utiliser les accolades

Vous ne pouvez utiliser les accolades que de deux manières à l'intérieur de JSX :

1. En tant que textedirectement à l'intérieur d'une balise JSX :<h1>{name}'s To Do List</h1>fonctionne, mais<{tag}>Gregorio Y. Zara's To Do List</{tag}>ne fonctionnera pas.
2. En tant qu'attributsimmédiatement après le signe= : src={avatar}lira la variableavatar, maissrc="{avatar}"passera la chaîne"{avatar}".

Utiliser les « doubles accolades » : CSS et autres objets dans JSX

En plus des chaînes, des nombres et d'autres expressions JavaScript, vous pouvez même passer des objets dans JSX. Les objets sont également notés avec des accolades, comme{ name: "Hedy Lamarr", inventions: 5 }. Par conséquent, pour passer un objet JS dans JSX, vous devez envelopper l'objet dans une autre paire d'accolades :person={{ name: "Hedy Lamarr", inventions: 5 }}.

Vous pouvez voir cela avec les styles CSS en ligne dans JSX. React ne vous oblige pas à utiliser des styles en ligne (les classes CSS fonctionnent très bien dans la plupart des cas). Mais lorsque vous avez besoin d'un style en ligne, vous passez un objet à l'attributstyle :

Essayez de modifier les valeurs debackgroundColoretcolor.

Vous pouvez vraiment voir l'objet JavaScript à l'intérieur des accolades lorsque vous l'écrivez ainsi :

La prochaine fois que vous verrez{{et}}dans du JSX, sachez que ce n'est rien de plus qu'un objet à l'intérieur des accolades JSX !

Plus de plaisir avec les objets JavaScript et les accolades

Vous pouvez regrouper plusieurs expressions dans un seul objet et y faire référence dans votre JSX à l'intérieur d'accolades :

Dans cet exemple, l'objet JavaScriptpersoncontient une chaînenameet un objettheme :

Le composant peut utiliser ces valeurs depersoncomme ceci :

Le JSX est un langage de template très minimal car il vous permet d'organiser les données et la logique en utilisant JavaScript.

Récapitulatif

Vous savez maintenant presque tout sur le JSX :

• Les attributs JSX entre guillemets sont passés sous forme de chaînes de caractères.
• Les accolades vous permettent d'intégrer la logique et les variables JavaScript dans votre balisage.
• Elles fonctionnent à l'intérieur du contenu de la balise JSX ou immédiatement après le=dans les attributs.
• {{et}}n'est pas une syntaxe spéciale : c'est un objet JavaScript niché à l'intérieur des accolades JSX.