React
Nycklarna reagerar
Sök…
Introduktion
Nycklar som reagerar används för att identifiera en lista med DOM-element från samma hierarki internt.
Så om du itererar över en matris för att visa en lista med li-element, behöver varje av elementen en unik identifierare som anges av nyckelegenskapen. Detta kan vanligtvis vara id för ditt databasobjekt eller index för arrayen.
Anmärkningar
Att använda arrayindex som nyckel rekommenderas vanligtvis inte när matrisen kommer att förändras över tid. Från React Docs:
Som en sista utväg kan du passera objektets index i matrisen som en nyckel. Det kan fungera bra om objekten aldrig sorteras om, men omordningarna kommer att vara långsamma.
Ett bra exempel på detta: https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318
Använda id för ett element
Här har vi en lista med todo-objekt som skickas till rekvisita för vår komponent.
Varje todo-objekt har en text- och ID-egenskap. Föreställ dig att ID-egenskapen kommer från en backend-datastore och är ett unikt numeriskt värde:
todos = [
{
id: 1,
text: 'value 1'
},
{
id: 2,
text: 'value 2'
},
{
id: 3,
text: 'value 3'
},
{
id: 4,
text: 'value 4'
},
];
Vi ställer in nyckelattributet för varje itererat listelement till todo-${todo.id} så att reaktionen kan identifiera det internt:
render() {
const { todos } = this.props;
return (
<ul>
{ todos.map((todo) =>
<li key={ `todo-${todo.id}` }>
{ todo.text }
</li>
}
</ul>
);
}
Använda arrayindex
Om du inte har unika databas-id till hands kan du också använda det numeriska indexet för din array på följande sätt:
render() {
const { todos } = this.props;
return (
<ul>
{ todos.map((todo, index) =>
<li key={ `todo-${index}` }>
{ todo.text }
</li>
}
</ul>
);
}