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. Khá rối nhỉ , các bạn xem ví dụ để hiểu rõ hơn. Các bạn xem ở đây nếu không biết function map.
Trang 1Bài 11: ReactJS - sử dụng Keys
trong React
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 Khá rối nhỉ @@, các bạn xem ví dụ để hiểu rõ hơn Các bạn xem ở đây nếu không biết function map
App.js
import React from 'react';
class App extends React.Component{
constructor(){
super();
this.state ={
data:[
{
component:'First ',
id:1
Trang 2},
{
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>
Trang 3<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.
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App/>, document.getElementById('app'));
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:
Trang 4Kết thúc bài 11 ở đây, các bạn xem lại rồi thực hành thêm để hiểu rõ hơn nha Chúc các bạn học tốt.