ReactJS - Schlüssel

Reagieren keyssind nützlich, wenn Sie mit dynamisch erstellten Komponenten arbeiten oder wenn Ihre Listen von den Benutzern geändert werden. Einstellen derkey Mit value bleiben Ihre Komponenten nach der Änderung eindeutig identifiziert.

Verwenden von Schlüsseln

Lassen Sie uns dynamisch erstellen ContentElemente mit eindeutigem Index (i). Dasmap Funktion wird drei Elemente aus unserer erstellen dataArray. Seit derkey Der Wert muss für jedes Element eindeutig sein. Wir werden i als Schlüssel für jedes erstellte Element zuweisen.

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

Wir erhalten das folgende Ergebnis für die Schlüsselwerte jedes Elements.

Wenn wir in Zukunft einige Elemente hinzufügen oder entfernen oder die Reihenfolge der dynamisch erstellten Elemente ändern, verwendet React das key Werte, um jedes Element zu verfolgen.