ReactJS - Clés

Réagir keyssont utiles lorsque vous travaillez avec des composants créés dynamiquement ou lorsque vos listes sont modifiées par les utilisateurs. Réglage dukey value gardera vos composants identifiés de manière unique après le changement.

Utilisation des clés

Créons dynamiquement Contentéléments avec un index unique (i). lemap fonction créera trois éléments de notre datatableau. Depuis lekey la valeur doit être unique pour chaque élément, nous attribuerons i comme clé pour chaque élément créé.

App.jsx

import React from 'react';

class App extends React.Component {
   constructor() {
      super();
		
      this.state = {
         data:[
            {
               component: 'First...',
               id: 1
            },
            {
               component: 'Second...',
               id: 2
            },
            {
               component: 'Third...',
               id: 3
            }
         ]
      }
   }
   render() {
      return (
         <div>
            <div>
               {this.state.data.map((dynamicComponent, i) => <Content 
                  key = {i} componentData = {dynamicComponent}/>)}
            </div>
         </div>
      );
   }
}
class Content extends React.Component {
   render() {
      return (
         <div>
            <div>{this.props.componentData.component}</div>
            <div>{this.props.componentData.id}</div>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

Nous obtiendrons le résultat suivant pour les valeurs clés de chaque élément.

Si nous ajoutons ou supprimons certains éléments à l'avenir ou si nous modifions l'ordre des éléments créés dynamiquement, React utilisera le key valeurs pour garder une trace de chaque élément.