React中如何重复渲染JSX组件？解决循环报错问题

你遇到的错误是因为JSX的花括号里只能放表达式，而for循环是语句，不能直接嵌入其中。下面给你两种简单可行的方案：

方案一：使用数组map方法（最常用） #

直接在JSX里生成包含5个<Paciente/>的数组，React会自动渲染数组里的每个组件：

{Array.from({ length: 5 }, (_, index) => (
  <Paciente key={index} />
))}

注意必须给每个组件加key属性，React靠它来追踪列表项的变化，避免不必要的重渲染问题。如果你的组件有唯一标识（比如id），用真实id比index更好。

方案二：先循环生成组件数组再渲染 #

先在组件逻辑里用for循环把组件存进数组，再在JSX里渲染这个数组：

function YourParentComponent() {
  // 先创建空数组存组件
  const pacienteList = [];
  // 循环5次，把<Paciente/> push进去
  for (let i = 0; i < 5; i++) {
    pacienteList.push(<Paciente key={i} />);
  }

  return (
    <div>
      {/* 直接渲染数组 */}
      {pacienteList}
    </div>
  );
}

这两种方法都能避免重复粘贴组件代码，实现批量渲染。

内容的提问来源于stack exchange，提问作者Adrian Alberto López Arreguin