React 列表

在 React 中，您将使用某种类型的循环渲染列表。

JavaScript map() 数组方法通常是首选方法。

实例:

让我们把 garage 里所有的 cars 都渲染出来:

import React from 'react';
import ReactDOM from 'react-dom';
function Car(props) {
  return <li>I am a { props.brand }</li>;
}
function Garage() {
  const cars = ['Ford', 'BMW', 'Audi'];
  return (
    <>
        <h2>Who lives in my garage?</h2>
        <ul>
        {cars.map((car) => <Car brand={car} />)}
      </ul>
    </>
  );
}
ReactDOM.render(<Garage />, document.getElementById('root'));

当您在 create-react-app 中运行此代码时，它将起作用，但您将收到一条警告，提示没有为列表项提供 "key"。

Keys

Keys 让 React 跟踪元素。这样，如果某个项被更新或删除，则只有该项将被重新渲染，而不是整个列表。

每个同一级别的 Keys 都必须是唯一的。但它们可以在全局范围内复制。

实例:

让我们重构前面的示例以包含 Keys:

import React from 'react';
import ReactDOM from 'react-dom';
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'));