ReactJS - Chiavi

Reagire keyssono utili quando si lavora con componenti creati dinamicamente o quando gli elenchi vengono modificati dagli utenti. L'impostazione dikey value manterrà i tuoi componenti identificati in modo univoco dopo la modifica.

Utilizzo delle chiavi

Creiamo dinamicamente Contentelementi con indice univoco (i). Ilmap la funzione creerà tre elementi dal nostro dataVettore. Dal momento che ilkey value deve essere univoco per ogni elemento, assegneremo i come chiave per ogni elemento creato.

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'));

Otterremo il seguente risultato per i valori chiave di ogni elemento.

Se in futuro aggiungiamo o rimuoviamo alcuni elementi o cambiamo l'ordine degli elementi creati dinamicamente, React utilizzerà il key valori per tenere traccia di ogni elemento.