我怎样才能创建一个组件，我可以在反应组件中递归地添加尽可能多的子点级别

Question

之前我的组件只有一级子点，所以，

看起来像

要点1

子点 1
子点 2

要点2

子点 1

为此，我的代码如下所示

    interface PointCardProps {
    pointData: {
      mainPoint: string
      subPoint: string[]
    }[] 
  }

export const singleNest = (props:PointCardProps) => {
    return(
        <ol>
        {props.pointData.map((value) => {
          return (
            <>
              <li>
                <div>
                  {value.mainPoint}
                  <div>
                    <ul>
                      {value.subPoint.map((point) => {
                        return <li>{point}</li>
                      })}
                    </ul>
                  </div>
                </div>
              </li>
            </>
          )
        })}
      </ol>
    )
}

如何更改组件，使其可以具有任意数量的级别

例如：要点1

子点1
子点2
- 分点2.1
  - 分点2.2
    - 分点2.2.1

需要从更改界面开始，请帮忙

Answer 1

这里有递归反应组件和递归道具：

type Point = {
  point: string;
  subpoints: Point[];
};

const points = {
  point: "0",
  subpoints: [
    {
      point: "1",
      subpoints: [
        {
          point: "2",
          subpoints: []
        }
      ]
    }
  ]
};

const RecursiveList = (props: Point) => {
  const { point, subpoints } = props;
  console.log({ subpoints });

  return (
    <>
      <div>{point}</div>
      <ul>
        {subpoints.map((elem, index) => (
          <RecursiveList key={index} {...elem} />
        ))}
      </ul>
    </>
  );
};

export default function App() {
  return <RecursiveList {...points} />;
}

我怎样才能创建一个组件，我可以在反应组件中递归地添加尽可能多的子点级别

how can I create a component where I can add as many levels of subpoints I can recursively in a react component

recursive-datastructures

typescript

reactjs

recursive-type

react-typescript