React中拆分嵌套循环：如何封装组件且不破坏循环逻辑？

你可以从最内层循环开始，逐层提取独立组件，通过props传递对应层级的数据，完全保留原有嵌套逻辑：

1. 提取最内层组件（ThirdLevelItem） #

负责渲染第三层级内容，接收当前项的键值对作为props：

const ThirdLevelItem = ({ item3Obj }) => {
  const [item3b, item4] = item3Obj ?? [];
  return (
    <div>
      <p>{item3b}</p>
    </div>
  );
};

2. 提取第二层组件（SecondLevelItem） #

接收第二层级的键和对应数据，内部循环渲染第三层级组件：

const SecondLevelItem = ({ item2a, item3 }) => {
  return (
    <div>
      <p>{item2a}</p>
      {Object.entries(item3)?.map((item3Obj) => (
        <ThirdLevelItem key={item3Obj[0]} item3Obj={item3Obj} />
      ))}
    </div>
  );
};

注意：给循环元素添加唯一key属性，符合React列表渲染规范

3. 提取最外层组件（FirstLevelItem） #

接收第一层级的键和对应数据，内部循环渲染第二层级组件：

const FirstLevelItem = ({ item1, item2 }) => {
  return (
    <div>
      <div>
        <p>{item1}</p>
      </div>
      {Object.entries(item2)?.map((itemObj) => {
        const [item2a, item3] = itemObj ?? [];
        return (
          <SecondLevelItem key={item2a} item2a={item2a} item3={item3} />
        );
      })}
    </div>
  );
};

4. 主组件中使用拆分后的组件 #

原嵌套循环会变得简洁清晰，逻辑和之前完全一致：

{Object.entries(data)?.map((log) => {
  const [item1, item2] = log ?? [];
  return <FirstLevelItem key={item1} item1={item1} item2={item2} />;
})}

这种拆分方式把每个层级的渲染逻辑封装到独立组件中，代码更易维护复用，同时完整保留了原有的嵌套结构和数据传递逻辑。

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