如何在React中实现支持任意层级嵌套子点的递归组件

1. 调整TypeScript类型定义 #

首先把原来的扁平结构改成递归类型，支持任意层级的子节点：

// 递归的节点类型，每个节点包含内容和可选的子节点数组
interface Point {
  content: string;
  children?: Point[];
}

// 组件入参类型
interface PointCardProps {
  pointData: Point[];
}

将原来的mainPoint统一为通用字段content，subPoint替换为可选的children数组，数组项仍为Point类型，即可支持无限层级嵌套。

2. 实现递归渲染逻辑 #

抽离单独的递归子组件渲染每一级节点，外层保留原有的有序列表包裹主节点：

import React from 'react';

interface Point {
  content: string;
  children?: Point[];
}

interface PointCardProps {
  pointData: Point[];
}

// 递归渲染子节点的组件
const PointItem: React.FC<{ point: Point }> = ({ point }) => {
  return (
    <li>
      {point.content}
      {/* 存在子节点时递归渲染下一级无序列表 */}
      {point.children?.length ? (
        <ul>
          {point.children.map((child, index) => (
            <PointItem key={index} point={child} />
          ))}
        </ul>
      ) : null}
    </li>
  );
};

export const MultiNest = (props: PointCardProps) => {
  return (
    <ol>
      {props.pointData.map((mainPoint, index) => (
        <PointItem key={index} point={mainPoint} />
      ))}
    </ol>
  );
};

3. 使用示例 #

对应你给出的嵌套效果，组件入参写法如下：

const demoData: Point[] = [
  {
    content: "main point 1",
    children: [
      { content: "sub point 1" },
      {
        content: "sub point 2",
        children: [
          {
            content: "sub point 2.1",
            children: [
              {
                content: "sub point 2.2",
                children: [
                  { content: "sub point 2.2.1" }
                ]
              }
            ]
          }
        ]
      }
    ]
  },
  {
    content: "main point 2",
    children: [
      { content: "subpoint 1" }
    ]
  }
];

// 调用组件
<MultiNest pointData={demoData} />

渲染后的DOM结构完全符合需求，理论上支持无限层级的子节点嵌套。

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