React ignoruje atrybut „for” elementu etykiety

250

W React (frameworku Facebooka) muszę wyrenderować element etykiety związany z wprowadzonym tekstem przy użyciu standardowego foratrybutu.

np. używany jest następujący JSX:

<label for="test">Test</label>
<input type="text" id="test" />

Jednak powoduje to HTML bez wymaganego (i standardowego) foratrybutu:

<label>Test</label>
<input type="text" id="test">

Co ja robię źle?

reactjs label goofballLogic
źródło

Odpowiedzi:

484

forAtrybut jest nazywany htmlForkątem zgodności z właściwością DOM API. Jeśli korzystasz z kompilacji React, powinieneś zobaczyć ostrzeżenie w konsoli na ten temat.

Sophie Alpert
źródło
4
Dzięki Ben. Czy możesz wyjaśnić mi „dla spójności z DOM API”?
goofballLogic
17
Jeśli masz labelelementu (zgodnie z danymi przekazanymi przez document.createElement, document.getElementByIditp) chcesz uzyskać dostęp do jego forwłaściwości jako label.htmlFor.
Sophie Alpert
3
@Meglio W HTML potrzebujesz identyfikatora, aby atrybut for działał. Aby uczynić komponent wielokrotnego użytku, możesz dodać właściwość name do komponentu, który ustawisz jako ID i atrybut name w rzeczywistym polu wejściowym.
Wim Mostmans
2
Nieważne, znalazłem odpowiedź tutaj . Mówią, że używają generatora identyfikatorów.
Tobia
2
@BenAlpert Dzięki za rzucenie światła na to. Nigdy nie patrzyłem na interfejs API DOM ze względu na jQuery i inne rzeczy (proszę wybacz mi). Ale na wypadek, gdyby ktokolwiek chciał dowiedzieć się więcej na ten temat, sprawdź developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement .
alvincrespo
13

W React musisz użyć słów kluczowych według definicji, aby zdefiniować atrybuty HTML.

class -> className

jest używany i

for -> htmlFor

jest używane, ponieważ w przypadku reagowania rozróżniana jest wielkość liter, upewnij się, że musisz przestrzegać małych i dużych nakładów zgodnie z wymaganiami.

Jani Devang
źródło
3

zarówno fori classsą zarezerwowane słowa w JavaScript to dlaczego, jeśli chodzi o atrybuty HTML w JSX trzeba użyć czegoś innego, React zespół postanowił wykorzystać htmlFori classNameodpowiednio

Trident D'Gao
źródło
1
To nie ma absolutnie nic wspólnego z tym. Transformacja JSX mogłaby po prostu przetłumaczyć ją na „klasę”, która obowiązuje również dla nazw właściwości. W rzeczywistości w Preact można używać zarówno class, jak i className.
Malte R
3
Chociaż React może przekształcić go w JSX, nie robi tego. Ich Docs (od 25-Mar-2020) państwa "Ponieważ forto słowo zarezerwowane w JavaScript, React elementy użyć htmlForzamiast.": Reactjs.org/docs/dom-elements.html#htmlfor
nirvdrum
@MalteR możesz to powiedzieć IE8, IE7 i IE6
Trident D'Gao
0

To jest htmlFor w JSX, a class to className w JSX

Daniel Nguyen
źródło