Key được sử dụng trong React khi một component return một mảng phần tử hoặc một danh sách các phần tử. Key giúp react xác định các phần tử trong mảng hoặc danh sách, phần tử nào đươc thêm vào, phần tử nào được update hay remove...
Sử dụng Key¶
Giờ chúng ta sẽ tạo một component tên là Content với unique index( tạm dịch là chỉ mục duy nhất) là i được chứa trong App component. Trong component App, function map sẽ tạo ra 3 element từ mảng data chứa trong state. Sau đó ta sẽ gán Key cho từng element đó bằng với i ở trên, lưu ý là Key dùng để định danh các phần tử nên giá trị của nó cần duy nhất, không được trùng.
App.js
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;
App sẽ render và return ra 3 thằng Content, mỗi thằng sẽ có 1 key duy nhất ứng với i.
Kết quả ta được:
Các bạn có thể vận dụng kiến thức các bài trước để update thêm bài này, tìm cách thêm xóa sửa component Content thì React sẽ sử dụng key để xác định các component bị tác động.
Nếu các bạn bỏ thành phần key={i} trong lúc render thì trong console sẽ xuất hiện lỗi sau:
