En React (marco de Facebook), necesito representar un elemento de etiqueta vinculado a una entrada de texto usando el foratributo estándar .
por ejemplo, se utiliza el siguiente JSX:
<label for="test">Test</label>
<input type="text" id="test" />Sin embargo, esto produce HTML que falta el foratributo requerido (y estándar) :
<label>Test</label>
<input type="text" id="test">¿Qué estoy haciendo mal?
Respuestas:
Se forllama htmlForal atributo por coherencia con la API de propiedades DOM. Si está utilizando la versión de desarrollo de React, debería haber visto una advertencia en su consola al respecto.
labelelemento (tal como lo devuelve document.createElement, document.getElementById, etc.) es posible acceder a su forpropiedad como label.htmlFor.
Sí, para reaccionar
for se convierte htmlFor
class se convierte className
etc.
Vea la lista completa de cómo se cambian los atributos HTML aquí:
Para React debe usar sus palabras clave por definición para definir atributos html.
class->className
se usa y
for->htmlFor
se utiliza, ya que reaccionar distingue entre mayúsculas y minúsculas, asegúrese de que debe seguir las letras pequeñas y mayúsculas según sea necesario.
ambos fory classson palabras reservadas en JavaScript, esta es la razón por la cual cuando se trata de atributos HTML en JSX necesita usar otra cosa, el equipo de React decidió usar htmlFory classNamerespectivamente
fores una palabra reservada en JavaScript, los elementos React usan htmlForen su lugar": reactjs.org/docs/dom-elements.html#htmlfor
htmlForpara reemplazar for!Puede encontrar más información siguiendo los enlaces a continuación.
https://facebook.github.io/react/docs/dom-elements.html#htmlfor
Eso es htmlFor en JSX y class es className en JSX