Composants React DOM

React prend en charge tous les composants natifs HTML et SVG du navigateur.

Composants communs

Tous les composants natifs du navigateur prennent en charge un jeu commun de props et d’événements.

Composants communs (ex. <div>)

Ça inclut quelques props spécifiques à React telles que ref et dangerouslySetInnerHTML.

Composants de formulaire

Ces composants natifs du navigateur acceptent des saisies utilisateur :

React leur réserve un traitement particulier parce que leur passer la prop value en fait des champs contrôlés.

Composants de ressources et métadonnées

Ces composants natifs du navigateur vous permettent de charger des ressources externes ou d’annoter le document avec des métadonnées :

Ils font l’objet d’un traitement particulier par React car celui-ci va les restituer directement dans l’en-tête du document, suspendre pendant le chargement des ressources, puis exécuter les autres comportements décrits dans les pages de référence pour chacun de ces composants.

Tous les composants HTML

React prend en charge tous les composants HTML natifs du navigateur, ce qui inclut :

Remarque

Comme dans le standard du DOM, React utilise une convention camelCase de nommage des props. Par exemple, vous écrirez tabIndex au lieu de tabindex. Vous pouvez convertir votre HTML existant en JSX grâce à un convertisseur en ligne.

Éléments HTML personnalisés

Si vous utilisez dans votre rendu une balise avec un tiret, comme dans <my-element>, React supposera que vous souhaitez exploiter un élément HTML personnalisé (custom element, une des parties des Web Components, NdT). Dans React, le rendu des éléments personnalisés fonctionne différemment du rendu des éléments natifs du navigateur :

Toutes les props des éléments personnalisés sont séralisées sous forme de chaînes de caractères, et sont systématiquement définies en tant qu’attributs.
Les éléments personnalisés utilisent class plutôt que className et for plutôt que htmlFor.

Si vous utilisez un élément HTML natif du navigateur doté d’un attribut is, il sera traité de la même façon qu’un élément personnalisé.

Remarque

Une future version de React prendra plus largement en charge les éléments personnalisés.

Vous pouvez l’essayer en mettant à niveau vos modules React vers la version expérimentale publiée la plus récente :

react@experimental
react-dom@experimental

Les versions expérimentales de React peuvent contenir des bugs. Ne les utilisez pas en production.

Tous les composants SVG

React prend en charge tous les composants SVG natifs du navigateur, ce qui inclut :

Remarque

Les attributs à espace de noms doivent également être écrits sans le deux-points :

xlink:actuate devient xlinkActuate.
xlink:arcrole devient xlinkArcrole.
xlink:href devient xlinkHref.
xlink:role devient xlinkRole.
xlink:show devient xlinkShow.
xlink:title devient xlinkTitle.
xlink:type devient xlinkType.
xml:base devient xmlBase.
xml:lang devient xmlLang.
xml:space devient xmlSpace.
xmlns:xlink devient xmlnsXlink.

PrécédentuseFormStatus

SuivantCommuns (ex. <div>)