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 thức mảng JavaScript map()
thường là phương thức được ưa thích.
Nếu bạn cần ôn lại phương thức map()
, hãy xem phần ES6 .
Ví dụ:
Hãy kết xuất tất cả những chiếc xe từ gara 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> </> ); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Garage />);
Khi bạn chạy mã này trong 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 ĐĂNG KÝ
Phím
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 bị xóa thì chỉ mục đó sẽ được hiển thị lại thay vì toàn bộ danh sách.
Chìa 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 đôi trên toàn cầu.
Nói chung, khóa phải là một ID duy nhất được gán cho mỗi mục. Phương án cuối cùng là bạn có thể sử dụng chỉ mục mảng làm khóa.
Ví dụ:
Hãy cấu trúc lại ví dụ trước của chúng ta để 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> </> ); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Garage />);