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 中运行此代码时,它会起作用,但您会收到一条警告,指出没有为列表提供"密钥" 项目。


Keys

Keys 键允许 React 跟踪元素。 这样,如果一个项目被更新或删除,只有该项目将被重新渲染,而不是整个列表。

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

通常,密钥应该是分配给每个项目的唯一 ID。 作为最后的手段,您可以使用数组索引作为键。

实例:

让我们重构之前的示例以包含键:

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 />);

运行实例 »


学习训练

练习题:

添加允许 React 跟踪列表中元素的属性。

function GroceryList() {
  const items = [
    {id: 1, name: 'bread'},
    {id: 2, name: 'milk'},
    {id: 3, name: 'eggs'}
  ];

  return (
    <>
      <h1>Grocery List</h1>
      <ul>
        {items.map((item) => <li ={item.id}>{item.name}</li>)}
      </ul>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<GroceryList />);

开始练习