Attributs JSX (className, htmlFor, style, etc.)
Apprenez à définir et utiliser les attributs en JSX. Découvrez les différences clés avec HTML (className, htmlFor, style) et comment passer des valeurs dynamiques.
Définir les propriétés des éléments JSX
Tout comme les éléments HTML peuvent avoir des attributs pour définir leurs caractéristiques ou leur comportement (par exemple, `src` pour une image, `href` pour un lien, `class` pour le style), les éléments JSX peuvent également recevoir des attributs. En React, ces attributs sont en fait appelés props (propriétés) lorsqu'il s'agit de composants personnalisés, mais pour les éléments DOM natifs (comme `div`, `img`, `input`), le terme "attribut" est souvent utilisé par analogie avec HTML.
Cependant, il existe des différences importantes entre la syntaxe des attributs en HTML et en JSX, principalement en raison du fait que JSX est fondamentalement du JavaScript. Comprendre ces différences est essentiel pour éviter les erreurs courantes et écrire du JSX correct.
Différences de nommage : Le règne du camelCase
La différence la plus notable concerne le nommage des attributs. Etant donné que JSX est transpilé en JavaScript, certains noms d'attributs HTML entrent en conflit avec des mots-clés réservés en JavaScript. De plus, la convention générale en JavaScript est d'utiliser le camelCase (par exemple, `maVariable`) plutôt que le `kebab-case` (utilisé en HTML/CSS, comme `background-color`) ou le tout en minuscules.
Par conséquent, en JSX :
- L'attribut HTML `class` devient `className`. C'est probablement la substitution la plus fréquente. Le mot `class` est réservé en JavaScript pour définir des classes ES6.
- L'attribut HTML `for` (utilisé avec les balises `
- D'autres attributs HTML contenant des tirets ou simplement pour suivre la convention camelCase sont transformés : `tabindex` devient `tabIndex`, `readonly` devient `readOnly`, `maxlength` devient `maxLength`, etc.
- Les gestionnaires d'événements suivent également le camelCase : `onclick` devient `onClick`, `onchange` devient `onChange`, `onsubmit` devient `onSubmit`, etc.
Exemple :
function MonFormulaire() {
return (
);
}Exceptions : Les attributs standard qui n'entrent pas en conflit avec des mots-clés JavaScript et qui ne contiennent pas de tiret conservent généralement leur nom HTML (ex: `id`, `src`, `alt`, `href`, `type`, `value`, `placeholder`). De plus, les attributs `data-*` et `aria-*` (pour l'accessibilité) conservent leur nom original avec les tirets, conformément aux standards web.
Passer des valeurs aux attributs
Il existe deux manières principales de spécifier la valeur d'un attribut en JSX :
- Chaînes de caractères littérales : Pour les valeurs qui sont de simples chaînes de caractères, vous pouvez utiliser les guillemets doubles `""` (ou simples `''`), exactement comme en HTML.
const element = Site React;- Expressions JavaScript (avec `{}`) : Pour toute valeur qui n'est pas une simple chaîne de caractères (par exemple, un nombre, un booléen, une variable, le résultat d'une fonction, un objet), vous devez utiliser les accolades `{}`. C'est la même syntaxe que celle utilisée pour intégrer des expressions JavaScript dans le contenu JSX.
const isDisabled = true;
const imageUrl = "/images/profil.jpg";
const imageSize = 100;
function handleClick() { /* ... */ }
const element = (
);Attributs booléens : Si vous passez `true` à un attribut booléen (comme `disabled`, `checked`, `readOnly`), vous pouvez simplement mentionner l'attribut sans valeur, comme un raccourci. Passer `false`, `null` ou `undefined` omettra l'attribut du DOM rendu.
{/* Ces deux lignes sont équivalentes */}
{ /* Raccourci pour true */ }
{/* Ce bouton sera actif */}
Cas particulier : L'attribut `style`
L'attribut `style` en JSX est un cas particulier notable. Contrairement au HTML où l'attribut `style` accepte une chaîne de caractères contenant des déclarations CSS, en JSX, l'attribut `style` accepte un objet JavaScript.
Les clés de cet objet sont les propriétés CSS, mais écrites en camelCase (par exemple, `backgroundColor` pour `background-color`, `fontSize` pour `font-size`). Les valeurs sont généralement des chaînes de caractères (n'oubliez pas les unités comme `'px'`, `'%'`, `'em'`), bien que React puisse parfois interpréter des nombres comme des pixels pour certaines propriétés (il est plus sûr d'utiliser des chaînes).
Cette approche a été choisie pour des raisons de sécurité (évite l'injection de code via des chaînes de style) et de cohérence avec JavaScript.
// Option 1: Définir l'objet style séparément
const stylesParagraphe = {
color: "blue",
fontSize: "16px",
backgroundColor: "#f0f0f0", // camelCase requis
marginTop: "10px",
paddingLeft: 15 // Nombre interprété comme 15px (chaîne '15px' est plus sûre)
};
const MonParagraphe = () => {
return Ceci est un paragraphe stylé.
;
};
// Option 2: Définir l'objet style en ligne (double accolades !)
// L'accolade externe est pour l'expression JSX
// L'accolade interne est pour l'objet littéral JavaScript
const AutreParagraphe = () => {
return (
Autre paragraphe avec style en ligne.
);
};Bien qu'utile pour des styles dynamiques, il est généralement recommandé de ne pas abuser des styles en ligne pour des raisons de performance et de maintenabilité. Préférez l'utilisation de `className` avec des feuilles de style CSS, des CSS Modules ou des bibliothèques CSS-in-JS.
Conclusion : S'adapter aux conventions JSX
La définition des attributs en JSX suit des règles spécifiques qu'il est important de maîtriser. Retenez principalement l'utilisation du camelCase pour les noms d'attributs (avec les remplacements clés `className` et `htmlFor`), l'utilisation des guillemets pour les chaînes littérales et des accolades `{}` pour toutes les autres valeurs (variables, nombres, booléens, fonctions, objets). Le cas particulier de l'attribut `style` qui attend un objet JavaScript est également un point crucial à retenir. En appliquant ces conventions, vous pourrez définir efficacement les propriétés de vos éléments JSX.