Référence de l’API
Composants

Composants communs (par exemple <div>)

Tous les composants natifs du navigateur, tels que <div>, prennent en charge des props et des événements communs.

Référence

Composants communs (par exemple <div>) 

<div className="wrapper">Quelque chose</div>

Voir d’autres exemples plus bas.

Props

Ces props spécifiques à React sont prises en charge pour tous les composants natifs :

  • children : un nœud React (un élément, une chaîne de caractères, un nombre, un portail, un nœud vide comme null, undefined ou un booléen, ou encore un tableau d’autres nœuds React). Elle spécifie le contenu à l’intérieur d’un composant. Lorsque vous utilisez du JSX, vous spécifiez généralement la prop children de manière implicite en imbriquant les balises comme dans <div><span /></div>.

  • dangerouslySetInnerHTML : un objet de la forme { __html: '<p>du HTML</p>' } avec du HTML brut dans une chaîne de caractères. Il réécrit la propriété innerHTML du nœud DOM et affiche à l’intérieur le HTML fourni. Cette méthode doit être utilisée avec une extrême prudence ! Si le HTML fourni n’est pas fiable (par exemple s’il est basé sur des données de l’utilisateur), vous risquez d’introduire une vulnérabilité XSS. Apprenez-en davantage sur dangerouslySetInnerHTML.

  • ref : un objet ref provenant de useRef, de createRef, d’une fonction de rappel ref ou d’une chaîne de caractères pour les refs historiques. Votre ref sera calée sur l’élément DOM pour ce nœud. Apprenez-en davantage sur la manipulation du DOM avec les refs.

  • suppressContentEditableWarning : un booléen. S’il est à true, supprime l’avertissement que React affiche pour les éléments qui ont à la fois des children et contentEditable={true} (lesquels ne fonctionnent normalement pas ensemble). Vous pouvez l’utiliser si vous construisez une bibliothèque de champ de saisie qui gère manuellement le contenu contentEditable.

  • suppressHydrationWarning : un booléen. Si vous utilisez le rendu côté serveur, il y a normalement un avertissement lorsque les rendus côté serveur et côté client produisent un contenu différent. Dans certains rares cas (comme avec les horodatages), il est très compliqué — voire impossible — de garantir une correspondance exacte. Si vous définissez suppressHydrationWarning à true, React ne vous alertera plus en cas d’incohérence d’attributs ou de contenu pour cet élément. Ça ne fonctionne qu’à un seul niveau de profondeur, et c’est conçu comme une échappatoire. N’en n’abusez pas. Apprenez-en davantage sur la suppression des erreurs d’hydratation.

  • style : un objet contenant des styles CSS, par exemple { fontWeight: 'bold', margin: 20 }. À l’image de la propriété style du DOM, les noms des propriétés CSS doivent être écrites en camelCase, comme fontWeight au lieu de font-weight. Vous pouvez passer des valeurs sous forme de chaîne de caractères ou de nombre. Si vous utilisez un nombre, tel que width: 100, React ajoutera automatiquement px (« pixels ») à la valeur, à moins qu’il ne s’agisse d’une propriété sans unité. Nous vous conseillons de n’utiliser style que pour les styles dynamiques, pour lesquels vous ne connaissez pas les valeurs de style à l’avance. Dans les autres cas, il est bien plus performant d’utiliser des classes CSS avec className. Apprenez-en davantage sur className et style.

Ces props standard du DOM sont également prises en charge pour tous les composants natifs :