No React (estrutura do Facebook), preciso renderizar um elemento de rótulo associado a uma entrada de texto usando o foratributo padrão .
por exemplo, o seguinte JSX é usado:
<label for="test">Test</label>
<input type="text" id="test" />No entanto, isso produz HTML sem o foratributo necessário (e padrão) :
<label>Test</label>
<input type="text" id="test">O que estou fazendo de errado?
Respostas:
O foratributo é chamado htmlForpara consistência com a API da propriedade DOM. Se você estiver usando a versão de desenvolvimento do React, deverá ter visto um aviso no console sobre isso.
labelelemento (como retornado por document.createElement, document.getElementById, etc) que você acessar a sua forpropriedade como label.htmlFor.
Sim, para reagir,
for torna-se htmlFor
class torna-se className
etc.
veja a lista completa de como os atributos HTML são alterados aqui:
Para React, você deve usar suas palavras-chave por definição para definir atributos html.
class->className
é usado e
for->htmlFor
é usado, pois react faz distinção entre maiúsculas e minúsculas, certifique-se de seguir pequeno e capital conforme necessário.
ambas fore classsão palavras reservadas em JavaScript; é por isso que, quando se trata de atributos HTML em JSX, você precisa usar outra coisa, a equipe do React decidiu usar htmlFore, classNamerespectivamente,
foré uma palavra reservada em JavaScript, os elementos React são usados em htmlForvez disso.": Reactjs.org/docs/dom-elements.html#htmlfor
htmlForpara substituir for!Você pode encontrar mais informações seguindo os links abaixo.
https://facebook.github.io/react/docs/dom-elements.html#htmlfor
Isso é htmlFor em JSX e classe é className em JSX