React ignoriert das 'for'-Attribut des Label-Elements

Question

In React (Facebooks Framework), muss ich ein Label-Element rendern, das an ein Texteingabegebunden ist und das for-Attribut verwendet.

z.B. wird das folgende JSX verwendet:

Test

Jedoch erzeugt dies HTML, das das erforderliche (und standardmäßige) for-Attribut fehlt:

Test

Was mache ich falsch?

Answer 1

Das for-Attribut wird aus Gründen der Konsistenz mit der DOM-Property-API als htmlFor bezeichnet. Wenn Sie die Entwicklerversion von React verwenden, sollten Sie eine Warnung in Ihrer Konsole dazu gesehen haben.

Answer 2

Ja, für React,

for wird zu htmlFor

class wird zu className

usw.

Die vollständige Liste aller Änderungen an HTML-Attributen finden Sie hier:

https://facebook.github.io/react/docs/dom-elements.html

Answer 3

Für React müssen Sie die vordefinierten Schlüsselwörter verwenden, um HTML-Attribute zu definieren.

class -> className

wird verwendet und

for -> htmlFor

wird verwendet, da React auf die Groß- und Kleinschreibung achtet. Stellen Sie sicher, dass Sie klein und groß schreiben wie erforderlich.

Answer 4

Nur React htmlFor verwenden, um for zu ersetzen!

Da for ein reserviertes Schlüsselwort in JavaScript ist, verwenden React-Elemente stattdessen htmlFor.

Refs

Sie können weitere Informationen finden, indem Sie den untenstehenden Links folgen.

https://facebook.github.io/react/docs/dom-elements.html#htmlfor

https://github.com/facebook/react/issues/8483

https://github.com/facebook/react/issues/1819

Answer 5

Beide for und class sind reservierte Wörter in JavaScript, deshalb müssen Sie für HTML-Attribute in JSX etwas anderes verwenden. Das React-Team hat sich entschieden, htmlFor bzw. className dafür zu verwenden.