Keys
Các Keys React hữu ích khi làm việc với các component được tạo động hoặc khi danh sách của bạn bị người dùng thay đổi. Đặt giá trị khóa sẽ giữ cho các component của bạn được nhận dạng duy nhất sau khi thay đổi.
Sử dụng keys
Hãy tạo động các phần tử Content với chỉ mục duy nhất (i). Hàm map sẽ tạo ba phần tử từ mảng dữ liệu của chúng ta . Vì giá trị key 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 các giá trị key để theo dõi từng phần tử.
Bài viết nổi bật
Bài viết nổi bật