Maison > interface Web > js tutoriel > Pourquoi les noms des composants ReactJS doivent-ils commencer par une lettre majuscule ?

Pourquoi les noms des composants ReactJS doivent-ils commencer par une lettre majuscule ?

Susan Sarandon
Libérer: 2024-12-14 21:51:14
original
238 Les gens l'ont consulté

Why Do ReactJS Component Names Need to Start with a Capital Letter?

Conventions de dénomination des composants dans ReactJS : pourquoi les noms commencent-ils par des majuscules ?

Lorsque vous travaillez avec ReactJS, vous avez peut-être remarqué un comportement inhabituel : les noms des composants doivent commencer par des lettres majuscules, sinon le rendu du composant échouera. Prenons l'exemple suivant :

var fml = React.createClass({
  render: function () {
    return <a href='google.com'>Go</a>;
  }
});

React.render(<fml />, document.body);
Copier après la connexion

Ce composant ne sera pas rendu car « fml » commence par une lettre minuscule. Cependant, si vous le remplacez par « Fml », cela fonctionnera comme prévu.

La raison de cette convention réside dans JSX (JavaScript XML), qui est la syntaxe utilisée pour créer des composants React. Dans JSX, les noms de balises minuscules sont interprétés comme des balises HTML et non comme des composants React. Pour les différencier, React exige que les noms de composants commencent par des lettres majuscules.

Comprendre les mises en garde de l'API createElement

L'API createElement, qui est utilisée pour créer des éléments React, comporte des mises en garde spécifiques concernant les noms de balises :

  • sera compilé en React.createElement('component'), qui est une balise HTML.
  • compilera en React.createElement(Component), qui est un composant React.
  • compilera en React.createElement(obj.component), qui est un composant accessible via un objet.

En utilisant des lettres majuscules pour les noms de composants, vous vous assurez que JSX les interprète correctement comme des composants React et non Balises HTML. Cette convention permet d'éviter les erreurs et de maintenir la cohérence dans votre base de code React.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal