Dans React (le cadre de Facebook), j'ai besoin de rendre un élément d'étiquette lié à une entrée de texte en utilisant l' forattribut standard .
Par exemple, le JSX suivant est utilisé:
<label for="test">Test</label>
<input type="text" id="test" />Cependant, cela produit du HTML sans l' forattribut requis (et standard) :
<label>Test</label>
<input type="text" id="test">Qu'est-ce que je fais mal?
Réponses:
L' forattribut est appelé htmlForpar souci de cohérence avec l'API de propriété DOM. Si vous utilisez la version de développement de React, vous devriez avoir vu un avertissement dans votre console à ce sujet.
labelélément (comme retourné par document.createElement, document.getElementById, etc.) que vous souhaitez accéder à sa forpropriété comme label.htmlFor.
Oui, pour réagir,
for devient htmlFor
class devient className
etc.
voir la liste complète de la façon dont les attributs HTML sont modifiés ici:
Pour React, vous devez utiliser ses mots clés par définition pour définir les attributs html.
class->className
est utilisé et
for->htmlFor
est utilisé, comme react est sensible à la casse, assurez-vous que vous devez suivre petit et capital comme requis.
les deux foret classsont des mots réservés en JavaScript, c'est pourquoi en ce qui concerne les attributs HTML dans JSX, vous devez utiliser autre chose, l'équipe React a décidé d'utiliser htmlForet classNamerespectivement
forc'est un mot réservé en JavaScript, les éléments React utilisent à la htmlForplace.": Reactjs.org/docs/dom-elements.html#htmlfor
htmlForpour remplacer for!vous pouvez trouver plus d'informations en suivant les liens ci-dessous.
https://facebook.github.io/react/docs/dom-elements.html#htmlfor
C'est htmlFor dans JSX et la classe est className dans JSX