React 列表
在 React 中，您將使用某種迴圈來渲染列表。
JavaScript 的 map() 陣列方法通常是首選方法。
如果您需要複習 map() 方法，請檢視 ES6 部分。
示例
讓我們渲染車庫裡的所有汽車
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 />);
當您在 create-react-app 中執行此程式碼時，它將起作用，但您會收到一條警告，即列表項未提供“key”。
Keys
Keys 允許 React 跟蹤元素。這樣，如果一個專案被更新或刪除，只有該專案會被重新渲染，而不是整個列表。
Keys 需要是每個同級元素的唯一標識。但它們可以在全域性範圍內重複。
通常，key 應該是分配給每個專案的唯一 ID。作為最後的手段，您可以使用陣列索引作為 key。
示例
讓我們重構之前的示例，以包含 key
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 />);
