React中批量渲染HTML元素列表：当前写法是否正确？是否该用Props？

我需要重复渲染如下HTML结构：

<div className=mem-container mem-container-1>
      <h2>zone-1</h2>
      <p>*timestamp* memory stick added</p>
      <p>*timestamp* memory stick removed</p>
      <p>*timestamp* memory stick added</p>
      <h4>zone-1 memory sticks total : 10</h4>
</div>

于是编写了MemoryContainer函数：

const MemoryContainer = (memoryZoneNumber) => {
  const memContainerClass = `mem-container mem-container-${memoryZoneNumber}`;
  return (
    <div className={memContainerClass}>
      <h2>zone-{memoryZoneNumber}</h2>
      <p>*timestamp* memory stick added</p>
      <p>*timestamp* memory stick removed</p>
      <p>*timestamp* memory stick added</p>
      <h4>zone-{memoryZoneNumber} memory sticks total : 10</h4>
    </div>
  );
};

再通过MemoryContainerCounter循环生成6个实例：

const MemoryContainerCounter = () => {
  const memoryCounterArray = [];
  for (let i = 1; i <= 6; i++) {
    memoryCounterArray.push(MemoryContainer(i));
  }
  return memoryCounterArray;
};

请问这种实现方式在React中是否正确？还是应该使用Props来实现？

你当前的写法能勉强运行，但完全不符合React组件的设计规范，正确的实现必须使用Props传递参数，原因和修正方案如下：

问题所在 #

1. React组件函数的第一个参数必须是props对象，直接传单个值违背了React的约定，后续如果需要给组件添加更多参数（比如总内存数、操作记录），这种写法会变得混乱不堪。
2. 直接调用组件函数（MemoryContainer(i)）不是React组件的正确使用方式，虽然能返回React元素，但会丢失组件的核心特性——比如无法在组件内使用hooks、无法接收上下文（Context）、不符合React的渲染流程。
3. 列表渲染没有添加唯一key属性，会触发React的性能警告，也可能导致DOM更新时出现异常。

修正后的代码 #

1. 改为用Props接收参数的组件 #

// 组件接收props对象，解构出zoneNumber参数
const MemoryContainer = ({ zoneNumber, totalSticks = 10 }) => {
  const memContainerClass = `mem-container mem-container-${zoneNumber}`;
  return (
    <div className={memContainerClass}>
      <h2>zone-{zoneNumber}</h2>
      <p>*timestamp* memory stick added</p>
      <p>*timestamp* memory stick removed</p>
      <p>*timestamp* memory stick added</p>
      <h4>zone-{zoneNumber} memory sticks total : {totalSticks}</h4>
    </div>
  );
};

2. 正确渲染组件列表（加key，用JSX调用组件） #

const MemoryContainerCounter = () => {
  // 用map生成列表更符合React风格，同时添加唯一key
  return Array.from({ length: 6 }, (_, index) => {
    const zoneNum = index + 1;
    return <MemoryContainer key={zoneNum} zoneNumber={zoneNum} />;
  });
};

或者保持for循环的写法，修正调用方式：

const MemoryContainerCounter = () => {
  const memoryCounterArray = [];
  for (let i = 1; i <= 6; i++) {
    // 用JSX语法调用组件，并传递props和key
    memoryCounterArray.push(<MemoryContainer key={i} zoneNumber={i} />);
  }
  return memoryCounterArray;
};

关键要点总结 #

• 组件的参数必须通过props传递，这是React组件的核心设计模式，保证了组件的可复用性和扩展性。
• 渲染组件必须使用JSX语法（<Component />），而不是直接调用函数。
• 列表渲染必须添加唯一的key，推荐使用业务相关的唯一标识（如果有的话），这里用zone编号作为key是合理的。

内容的提问来源于stack exchange，提问作者me-an-ape