渲染列表

来源: 2024-05-26 14:06:27 播报

使用 for 循环 和 array 的 map() 函数 来渲染组件列表。

const products = [
  { title: 'Cabbage', id: 1 },
  { title: 'Garlic', id: 2 },
  { title: 'Apple', id: 3 },
];

在组件中,使用 map() 函数将这个数组转换为

  • 标签构成的列表:

    const listItems = products.map(product =>
      <li key={product.id}>
        {product.title}
      </li>
    );
    
    return (
      <ul>{listItems}</ul>
    );
    

    注意,

  • 有一个 key 属性。对于列表中的每一个元素,你都应该传递一个字符串或者数字给 key,用于在其兄弟节点中唯一标识该元素。