Danh sách phản ứng
Trong React, bạn sẽ hiển thị danh sách với một số loại vòng lặp.
Phương pháp mảng JavaScript map()thường là phương pháp được ưu tiên.
Nếu bạn cần cập nhật map()phương pháp, hãy xem
phần ES6 .
Thí dụ:
Hãy kết xuất tất cả các ô tô từ nhà để xe của chúng tôi:
function Car(props) {
return <li>I am a { props.brand }</li>;
}
function Garage() {
const cars = ['Ford', 'BMW', 'Audi'];
return (
<>
<h1>Who lives in my garage?</h1>
<ul>
{cars.map((car) => <Car brand={car} />)}
</ul>
</>
);
}
ReactDOM.render(<Garage />, document.getElementById('root'));
Khi bạn chạy mã này trong của bạn create-react-app, nó sẽ hoạt động nhưng bạn sẽ nhận được cảnh báo rằng không có "khóa" nào được cung cấp cho các mục trong danh sách.
Được chứng nhận!
$ 95 GHI DANH
Chìa khóa
Các phím cho phép React theo dõi các phần tử. Bằng cách này, nếu một mục được cập nhật hoặc xóa, chỉ mục đó sẽ được hiển thị lại thay vì toàn bộ danh sách.
Các khóa cần phải là duy nhất cho mỗi anh chị em. Nhưng chúng có thể được nhân bản trên toàn cầu.
Nói chung, khóa phải là một ID duy nhất được chỉ định cho mỗi mục. Phương án cuối cùng, bạn có thể sử dụng chỉ số mảng làm khóa.
Thí dụ:
Hãy cấu trúc lại ví dụ trước của chúng tôi để bao gồm các khóa:
function Car(props) {
return <li>I am a { props.brand }</li>;
}
function Garage() {
const cars = [
{id: 1, brand: 'Ford'},
{id: 2, brand: 'BMW'},
{id: 3, brand: 'Audi'}
];
return (
<>
<h1>Who lives in my garage?</h1>
<ul>
{cars.map((car) => <Car key={car.id} brand={car.brand} />)}
</ul>
</>
);
}
ReactDOM.render(<Garage />, document.getElementById('root'));