渲染列表

你需要 JavaScript 的 for循环和数组 map() 函数 特性来渲染列表。

比如，假设有一个产品列表：

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

在你的组件内部，使用 map() 函数将产品数组转换为 <li> 项的数组：

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

return (
  <ul>{listItems}</ul>
);

注意 <li> 有一个 key 属性。对于列表中的每一个项目，你都应该传递一个字符串或数字用来唯一标识该项目，以区别于其兄弟姐妹。 通常，key 应该来自你的数据，比如数据库的 ID。React 使用 key 属性来插入、删除或排序项目。

App.js：

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

export default function ShoppingList() {
  const listItems = products.map(product =>
    <li
      key={product.id}
      style={{
        color: product.isFruit ? 'magenta' : 'darkgreen'
      }}
    >
      {product.title}
    </li>
  );

  return (
    <ul>{listItems}</ul>
  );
}