ReactJS - Kunci

Reaksi keysberguna saat bekerja dengan komponen yang dibuat secara dinamis atau saat daftar Anda diubah oleh pengguna. Mengaturkey nilai akan membuat komponen Anda diidentifikasi secara unik setelah perubahan.

Menggunakan Kunci

Mari buat secara dinamis Contentelemen dengan indeks unik (i). Itumap fungsi akan membuat tiga elemen dari kami dataHimpunan. Sejakkey nilai harus unik untuk setiap elemen, kami akan menetapkan i sebagai kunci untuk setiap elemen yang dibuat.

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

Kami akan mendapatkan hasil berikut untuk nilai Key dari setiap elemen.

Jika kita menambah atau menghapus beberapa elemen di masa mendatang atau mengubah urutan elemen yang dibuat secara dinamis, React akan menggunakan key nilai untuk melacak setiap elemen.