React-js ignoriert das Attribut 'for' des Labels

75

Ich weiß, dass wir für 'class' className verwenden müssen, aber wie kann ich reagieren, um das Attribut 'for' beizubehalten?

Folgende:

<label for="recipient-name" className="control-label">Recipient:</label>

wird gerendert als:

<label class="control-label">Recipient:</label>

In einem anderen Zusammenhang finde ich es ärgerlich, dass ich Attribute nicht über die Chrome-Konsole ändern kann, wenn ich React verwende. Gibt es einen Weg, das zu umgehen? Wenn ich zum Beispiel das gerenderte Element inspiziere und das Attribut 'for' manuell hinzufüge, verschwindet es, wenn ich von diesem Steuerelement wegklicke (vermutlich, weil die Reaktion das Steuerelement, das ich vermute, erneut rendert).

javascript reactjs mike01010
quelle
1
Zu nicht verwandter Anmerkung: So ist es eben. React steuert das DOM, nicht etwas von außen. Schauen Sie sich auch die Dokumente an, in denen erklärt wird, was anstelle von verwendet werden soll for: facebook.github.io/react/docs/…
Felix Kling
6
Dies liegt natürlich an reservierten Wörtern in Javascript. forist ein reserviertes Wort und kann daher nicht als json-Schlüssel verwendet werden. Der jsx-Parser verwandelt Ihre jsx-Attributnamen in. Der gleiche Grund ist es classNamestatt class.
Mike Driver
1
Mögliches Duplikat des React-Label-Elements
WiredPrairie

Antworten:

158

Sie müssen htmlForstattdessen ein Attribut verwenden

<label htmlFor="recipient-name" className="control-label">Recipient:</label>
zerkms
quelle
3

forist ein Schlüsselwort in Javascript, daher können Sie es in JSX nicht verwenden. Sie müssen htmlFordas forAttribut verwenden, das in das Attribut übersetzt wird, sobald es im DOM gerendert wurde.

Ali Rehman
quelle