React
Toetsen reageren
Zoeken…
Invoering
Sleutels in reactie worden gebruikt om intern een lijst met DOM-elementen uit dezelfde hiërarchie te identificeren.
Dus als u een array doorloopt om een lijst met li-elementen weer te geven, heeft elk van de li-elementen een unieke identificatie nodig die wordt opgegeven door de eigenschap key. Dit kan meestal het ID van uw database-item of de index van de array zijn.
Opmerkingen
Het gebruik van de array-index als sleutel wordt over het algemeen niet aanbevolen als de array in de loop van de tijd zal veranderen. Uit de React Docs:
Als laatste redmiddel kunt u de index van een item als sleutel doorgeven in de array. Dit kan goed werken als de items nooit opnieuw worden besteld, maar het nabestellen gaat langzaam.
Een goed voorbeeld hiervan: https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318
De id van een element gebruiken
Hier hebben we een lijst met items die worden doorgegeven aan de rekwisieten van onze component.
Elk item heeft een eigenschap text en id. Stel je voor dat de eigenschap id afkomstig is van een back-end datastore en een unieke numerieke waarde is:
todos = [
{
id: 1,
text: 'value 1'
},
{
id: 2,
text: 'value 2'
},
{
id: 3,
text: 'value 3'
},
{
id: 4,
text: 'value 4'
},
];
We hebben het sleutelkenmerk van elk herhaald todo-${todo.id} op todo-${todo.id} zodat Reageren het intern kan identificeren:
render() {
const { todos } = this.props;
return (
<ul>
{ todos.map((todo) =>
<li key={ `todo-${todo.id}` }>
{ todo.text }
</li>
}
</ul>
);
}
De array-index gebruiken
Als u geen unieke database-ID's bij de hand hebt, kunt u ook de numerieke index van uw array als volgt gebruiken:
render() {
const { todos } = this.props;
return (
<ul>
{ todos.map((todo, index) =>
<li key={ `todo-${index}` }>
{ todo.text }
</li>
}
</ul>
);
}
