React
Clés en réaction
Recherche…
Introduction
Les clés en réaction sont utilisées pour identifier une liste d'éléments DOM de la même hiérarchie en interne.
Donc, si vous parcourez un tableau pour afficher une liste d'éléments li, chacun des éléments li nécessite un identifiant unique spécifié par la propriété key. Cela peut généralement être l'ID de votre élément de base de données ou l'index du tableau.
Remarques
L'utilisation de l'index de tableau en tant que clé n'est généralement pas recommandée lorsque le tableau doit changer au fil du temps. À partir des documents réactifs:
En dernier recours, vous pouvez passer l'index de l'élément dans le tableau en tant que clé. Cela peut bien fonctionner si les articles ne sont jamais réorganisés, mais les commandes seront lentes.
Un bon exemple à ce sujet: https://medium.com/@robinpokorny/index-as-a-key-is-ananti-pattern-e0349aece318
Utiliser l'id d'un élément
Nous avons ici une liste de tâches à transmettre aux accessoires de notre composant.
Chaque élément todo a une propriété text et id. Imaginez que la propriété id provienne d'un datastore de backend et soit une valeur numérique unique:
todos = [
{
id: 1,
text: 'value 1'
},
{
id: 2,
text: 'value 2'
},
{
id: 3,
text: 'value 3'
},
{
id: 4,
text: 'value 4'
},
];
Nous définissons l'attribut clé de chaque élément de liste itéré sur todo-${todo.id} pour que réaction puisse l'identifier en interne:
render() {
const { todos } = this.props;
return (
<ul>
{ todos.map((todo) =>
<li key={ `todo-${todo.id}` }>
{ todo.text }
</li>
}
</ul>
);
}
Utilisation de l'index du tableau
Si vous ne disposez pas d'identifiants de base de données uniques, vous pouvez également utiliser l'index numérique de votre tableau comme suit:
render() {
const { todos } = this.props;
return (
<ul>
{ todos.map((todo, index) =>
<li key={ `todo-${index}` }>
{ todo.text }
</li>
}
</ul>
);
}
