如何在ReactJS中递归渲染动态嵌套数组数据？

完全可以通过递归组件来渲染这种结构一致的嵌套数据，这比你示例里手动写多层map要灵活得多——不管数据嵌套多少层，都能自动适配，不用修改渲染逻辑。

实现思路 #

1. 抽离一个递归组件，专门处理单个嵌套项的渲染
2. 组件内部先渲染当前项的内容，再判断是否存在子项
3. 如果有子项，就递归调用自身，把每个子项传进去，同时可以传递层级参数来控制样式或标签

完整代码示例 #

import { useState } from 'react';

// 递归组件：负责渲染单个嵌套节点
const NestedItem = ({ item, level = 3 }) => {
  // 根据层级动态选择标题标签（h3、h4...）
  const Heading = `h${level}`;
  // 生成对应层级的前缀符号
  const prefix = '-'.repeat(level - 3);

  return (
    <div key={item.id}>
      <Heading>{prefix} {item.name}</Heading>
      // 存在子项时，递归渲染子节点，层级+1，同时添加缩进区分层级
      {item.childs?.length > 0 && (
        <div style={{ marginLeft: '24px' }}>
          {item.childs.map(child => (
            <NestedItem key={child.id} item={child} level={level + 1} />
          ))}
        </div>
      )}
    </div>
  );
};

function App () {
  const [data, setData] = useState([
    {
      id: '1',
      name: 'demo1',
      programParent: '',
      childs: [
        {
          id: '2',
          name: 'dem2',
          programParent: '1',
          childs: [
            {
              id: '4',
              name: 'demo4',
              programParent: '2',
              childs: [
                {
                  id: '5',
                  name: 'demo5',
                  programParent: '4'
                }
              ]
            }
          ]
        },
        {
          id: '3',
          name: 'demo3',
          programParent: '1'
        }
      ]
    },
    {
      id: '6',
      name: 'demo6',
      programParent: ''
    }
  ]);

  return (
    <div className="container">
      {data.length > 0 && data.map(item => (
        <NestedItem key={item.id} item={item} />
      ))}
    </div>
  );
}

export default App;

关键说明 #

• 递归逻辑：核心是NestedItem组件在发现当前项有子项时，再次调用自身渲染子节点，形成递归循环，直到没有子项为止。
• 层级适配：通过level参数动态调整标题标签和前缀符号，同时用marginLeft做视觉缩进，让嵌套结构更直观。
• 扩展性：不管你的数据嵌套3层还是10层，这个组件都能自动处理，不需要修改渲染代码，完美适配动态嵌套场景。

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