Ich habe Formularelemente mit label
s und ich möchte eindeutige IDs haben, um label
s mit Elementen mit htmlFor
Attribut zu verknüpfen . Etwas wie das:
React.createClass({
render() {
const id = ???;
return (
<label htmlFor={id}>My label</label>
<input id={id} type="text"/>
);
}
});
Früher habe ich IDs basierend auf generiert, this._rootNodeID
aber seit React 0.13 ist es nicht mehr verfügbar. Was ist der beste und / oder einfachste Weg, dies jetzt zu tun?
id = 'unique' + (++GLOBAL_ID);
wovar GLOBAL_ID=0;
?<label>My label<input type="text"/></label>
Antworten:
Diese Lösung funktioniert gut für mich.
utils/newid.js
::Und ich kann es so benutzen:
In isomorphen Apps funktioniert dies jedoch nicht.
Hinzugefügt am 17.08.2015 . Anstelle der benutzerdefinierten Funktion newId können Sie uniqueId von lodash verwenden.
Aktualisiert am 28.01.2016 . Es ist besser, eine ID in zu generieren
componentWillMount
.quelle
render
! Erstellen Sie die ID incomponentWillMount
render
. facebook.github.io/react/docs/component-specs.html . Es sollte jedoch ziemlich einfach zu beheben sein.componentWillMount
ist veraltet, tun Sie dies stattdessen im Konstruktor. Siehe: reactjs.org/docs/react-component.html#unsafe_componentwillmountDie ID sollte in
componentWillMount(Update für 2018) platziert werdenconstructor
, nichtrender
. Wenn Sie esrender
eingeben, werden unnötigerweise neue IDs neu generiert.Wenn Sie Unterstrich oder lodash verwenden, gibt es eine
uniqueId
Funktion, sodass der resultierende Code ungefähr so aussehen sollte:2019 Hooks Update:
quelle
const {current: id} = useRef(_uniqueId('prefix-'))
Nach dem Stand vom 04.04.2019 scheint dies mit den React Hooks erreicht werden zu können
useState
:Soweit ich weiß, ignorieren Sie das zweite Array-Element in der Array-Destrukturierung, mit dem Sie aktualisieren können
id
, und jetzt haben Sie einen Wert, der während der gesamten Lebensdauer der Komponente nicht erneut aktualisiert wird.Der Wert von
id
wird dort sein,myprefix-<n>
wo<n>
ein inkrementeller ganzzahliger Wert zurückgegeben wirduniqueId
. Wenn das für Sie nicht einzigartig genug ist, sollten Sie überlegen, wie Sie es sich wünschenoder sehen Sie sich die Bibliothek an, die ich hier veröffentlicht habe: https://github.com/rpearce/simple-uniqueid . Es gibt auch Hunderte oder Tausende anderer eindeutiger ID-Dinge, aber Lodashs
uniqueId
mit einem Präfix sollten ausreichen, um die Arbeit zu erledigen.Update 2019-07-10
Vielen Dank an @Huong Hk, der mich auf den faulen Anfangszustand von Hooks hingewiesen hat Die Summe davon ist, dass Sie eine Funktion übergeben können
useState
, die nur auf dem anfänglichen Mount ausgeführt wird.quelle
<input />
, was wichtig wäre, dass diehtmlFor
undid
Attribute zusammengebunden werden sollten, egal was die Werte sind.initialState
# 1const [ id ] = useState(() => uniqueId('myprefix-'))
anstelle des Ergebnisses einer Funktion # 2 bereitstellen.const [ id ] = useState(uniqueId('myprefix-'))
Der Status:id
von 2 oben genannten Möglichkeiten ist nicht unterschiedlich. Aber das andereuniqueId('myprefix-')
wird einmal ausgeführt (# 1) anstatt jedes neu gerenderte (# 2). Siehe: Fauler Ausgangszustand: reactjs.org/docs/hooks-reference.html#lazy-initial-state Wie man teure Objekte träge erstellt?: Reactjs.org/docs/…Sie können eine Bibliothek wie node-uuid verwenden , um sicherzustellen, dass Sie eindeutige IDs erhalten.
Installieren Sie mit:
npm install node-uuid --save
Fügen Sie dann in Ihrer Reaktionskomponente Folgendes hinzu:
quelle
render
verstößt gegen facebook.github.io/react/docs/component-specs.htmlHoffentlich ist dies hilfreich für alle, die nach einer universellen / isomorphen Lösung suchen, da mich das Problem der Prüfsumme in erster Linie hierher geführt hat.
Wie oben erwähnt, habe ich ein einfaches Dienstprogramm erstellt, um nacheinander eine neue ID zu erstellen. Da die IDs auf dem Server weiter inkrementiert werden und im Client von 0 neu beginnen, habe ich beschlossen, das Inkrement bei jedem Start der SSR zurückzusetzen.
Rufen Sie dann im Konstruktor oder in der Komponente WillMount der Stammkomponente den Reset auf. Dadurch wird der JS-Bereich für den Server in jedem Server-Rendering im Wesentlichen zurückgesetzt. Im Client hat (und sollte) es keine Wirkung.
quelle
Für die üblichen Verwendungen von
label
undinput
ist es einfach einfacher, Eingaben in ein Etikett wie dieses zu verpacken:Es ist auch möglich, in Kontrollkästchen / Radiobuttons das Root-Element aufzufüllen und dennoch Feedback zum Klicken auf die Eingabe zu erhalten.
quelle
select
Mehrfachbeschriftungen an verschiedenen Positionen, entkoppelten UI-Komponenten usw., auch unter Verwendung von IDs wird empfohlen a11y: Im Allgemeinen werden explizite Beschriftungen besser von der Hilfstechnologie w3 unterstützt. org / WAI / Tutorials / Formulare / Labels /…Ich habe eine einfache Lösung wie diese gefunden:
quelle
Andere einfache Möglichkeit mit Typoskript:
quelle
Ich erstelle ein uniqueId-Generatormodul (Typescript):
Verwenden Sie das Top-Modul, um eindeutige IDs zu generieren:
quelle
Verwenden Sie keine IDs, wenn Sie dies nicht benötigen, sondern verpacken Sie die Eingabe in ein Etikett wie das folgende:
Dann müssen Sie sich keine Gedanken mehr über eindeutige IDs machen.
quelle