码农教程 - 一技在手,衣食无忧! tools

React 列表

❮ 上一节 下一节 ❯

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

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

如果您需要复习一下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"。

按键

键允许 React 跟踪元素。这样，如果更新或删除某个项目，则只会重新呈现该项目而不是整个列表。

密钥对于每个兄弟姐妹来说必须是唯一的。但它们可以在全球范围内复制。

通常，密钥应该是分配给每个项目的唯一 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 />);

开始练习

❮ 上一节 下一节 ❯