React
Klucze reagują
Szukaj…
Wprowadzenie
Klucze w reakcji służą do wewnętrznej identyfikacji listy elementów DOM z tej samej hierarchii.
Jeśli więc iterujesz po tablicy, aby wyświetlić listę elementów li, każdy z elementów li potrzebuje unikalnego identyfikatora określonego przez właściwość key. Zwykle może to być identyfikator elementu bazy danych lub indeks tablicy.
Uwagi
Używanie indeksu tablicy jako klucza nie jest generalnie zalecane, gdy tablica ma się zmieniać z czasem. Z dokumentów React:
W ostateczności możesz przekazać indeks elementu do tablicy jako klucz. Może to działać dobrze, jeśli elementy nigdy nie zostaną ponownie uporządkowane, ale zmiana kolejności będzie powolna.
Dobry przykład na ten temat: https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318
Korzystanie z identyfikatora elementu
Tutaj mamy listę rzeczy do zrobienia, które są przekazywane do rekwizytów naszego komponentu.
Każdy element do zrobienia ma właściwość text i id. Wyobraź sobie, że właściwość id pochodzi z magazynu danych zaplecza i jest unikalną wartością liczbową:
todos = [
{
id: 1,
text: 'value 1'
},
{
id: 2,
text: 'value 2'
},
{
id: 3,
text: 'value 3'
},
{
id: 4,
text: 'value 4'
},
];
Ustawiamy kluczowy atrybut każdego iterowanego elementu listy na todo-${todo.id} , aby reakcja mogła go zidentyfikować wewnętrznie:
render() {
const { todos } = this.props;
return (
<ul>
{ todos.map((todo) =>
<li key={ `todo-${todo.id}` }>
{ todo.text }
</li>
}
</ul>
);
}
Korzystanie z indeksu tablicowego
Jeśli nie masz pod ręką unikalnych identyfikatorów bazy danych, możesz również użyć indeksu numerycznego swojej tablicy w następujący sposób:
render() {
const { todos } = this.props;
return (
<ul>
{ todos.map((todo, index) =>
<li key={ `todo-${index}` }>
{ todo.text }
</li>
}
</ul>
);
}
