ReactJS - Phím

Phản ứng keyshữu ích khi làm việc với các thành phần được tạo động hoặc khi danh sách của bạn bị người dùng thay đổi. Đặtkey giá trị sẽ giữ cho các thành phần của bạn được nhận dạng duy nhất sau khi thay đổi.

Sử dụng các phím

Hãy tạo động Contentphần tử có chỉ số duy nhất (i). Cácmap hàm sẽ tạo ba phần tử từ datamảng. Kể từ khikey giá trị cần phải là duy nhất cho mọi phần tử, chúng tôi sẽ gán i làm khóa cho mỗi phần tử được tạo.

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

Chúng tôi sẽ nhận được kết quả sau đây cho các giá trị Khóa của mỗi phần tử.

Nếu chúng tôi thêm hoặc xóa một số phần tử trong tương lai hoặc thay đổi thứ tự của các phần tử được tạo động, React sẽ sử dụng key các giá trị để theo dõi từng phần tử.