React中如何多次渲染组件？为何for循环仅渲染一次？

你在for循环里直接return <Component/>，函数会在第一次循环时就终止执行，后续循环根本没机会运行，所以只返回了第一个组件。

方法一：先收集组件再返回 #

创建一个数组，把循环生成的所有组件存进去，最后返回这个数组：

function YourComponent() {
  const componentList = [];
  for (var i = 0; i < products.length; i++) {
    // 记得给每个组件加唯一key，这是React列表渲染的要求
    componentList.push(<Component key={i} product={products[i]} />);
  }
  return componentList;
}

方法二：使用数组map方法（更推荐） #

React中处理列表渲染更常用的是数组的map方法，代码更简洁且符合React的设计习惯：

function YourComponent() {
  return products.map((product, index) => {
    // 优先用product的唯一标识当key（比如id），没有的话再用index
    return <Component key={product.id || index} product={product} />;
  });
}

注意事项 #

• 列表渲染必须给每个组件加唯一key，这能帮助React识别列表项的变化，避免不必要的重渲染和错误。
• 尽量避免用index作为key，当列表项的顺序可能变化时，用数据本身的唯一标识（比如产品id）更可靠。

内容的提问来源于stack exchange，提问作者Matt Yak