React
Tasten reagieren
Suche…
Einführung
Die Tasten in rea werden verwendet, um intern eine Liste von DOM-Elementen aus derselben Hierarchie zu identifizieren.
Wenn Sie also ein Array durchlaufen, um eine Liste von li-Elementen anzuzeigen, benötigt jedes li-Element einen eindeutigen Bezeichner, der in der key-Eigenschaft angegeben ist. Dies kann normalerweise die ID Ihres Datenbankelements oder der Index des Arrays sein.
Bemerkungen
Die Verwendung des Array-Index als Schlüssel wird im Allgemeinen nicht empfohlen, wenn sich das Array im Laufe der Zeit ändert. Aus den React Docs:
Als letzten Ausweg können Sie den Index des Elements im Array als Schlüssel übergeben. Dies kann gut funktionieren, wenn die Elemente nie neu angeordnet werden, aber die Reihenfolge wird langsam.
Ein gutes Beispiel dazu: https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318
Verwenden der ID eines Elements
Hier haben wir eine Liste mit Aufgaben, die an die Requisiten unserer Komponente übergeben werden.
Jedes ToDo-Element verfügt über eine Text- und ID-Eigenschaft. Stellen Sie sich vor, dass die id -Eigenschaft aus einem Backend-Datastore stammt und ein eindeutiger numerischer Wert ist:
todos = [
{
id: 1,
text: 'value 1'
},
{
id: 2,
text: 'value 2'
},
{
id: 3,
text: 'value 3'
},
{
id: 4,
text: 'value 4'
},
];
Wir setzen das Schlüsselattribut jedes iterierten Listenelements auf todo-${todo.id} damit es von todo-${todo.id} intern identifiziert werden kann:
render() {
const { todos } = this.props;
return (
<ul>
{ todos.map((todo) =>
<li key={ `todo-${todo.id}` }>
{ todo.text }
</li>
}
</ul>
);
}
Verwenden des Array-Indexes
Wenn Sie keine eindeutigen Datenbank-IDs zur Hand haben, können Sie auch den numerischen Index Ihres Arrays wie folgt verwenden:
render() {
const { todos } = this.props;
return (
<ul>
{ todos.map((todo, index) =>
<li key={ `todo-${index}` }>
{ todo.text }
</li>
}
</ul>
);
}