递归渲染反应组件？

Question

如果我有一个具有 2 层层次结构的对象：

const data = [
  {
    name: "Parent 1",
    children: [
      {
        name: "Child 1"
      },
      {
        name: "Child 2"
      }
    ]
  },
  {
    name: "Parent 2",
    children: [
      {
        name: "Child 3"
      },
      {
        name: "Child 4"
      }
    ]
  }
];

然后我可以在 React 中渲染每个项目：

const Child = ({ children }) => {
  if (!children) return null;
  return (
    <ul>
      {children.map(item => {
        return <li key={item.name}>{item.name}</li>;
      })}
    </ul>
  );
};

const Parent = ({ item }) => {
  return (
    <>
      <li>{item.name}</li>
      <Child children={item.children} />
    </>
  );
};

const App = () => {
  return (
    <ul>
      {data.map(item => {
        return <Parent key={item.name} item={item} />;
      })}
    </ul>
  );
};

但是，如果我不知道嵌套有多深，有没有办法递归渲染 React 组件以便渲染所有数据？

这演示了 3 层嵌套，但可以想象还有更多：

const data = [
  {
    name: "Parent 1",
    children: [
      {
        name: "Child 1",
        children: [
          {
            name: "Sub-child 1"
          },
          {
            name: "Sub-child 2"
          }
        ]
      },
      {
        name: "Child 2"
      }
    ]
  },
  {
    name: "Parent 2",
    children: [
      {
        name: "Child 3"
      },
      {
        name: "Child 4"
      }
    ]
  }
];

Answer 1

这与使用递归函数调用相同。使用像这样的函数：

const Children = (props) => <>
  <li>
    <p>{props.children.name}</p>
    {props.children.children && <ul>{renderChild(props.children.children)}</ul>}
  </li>
</>;

const renderChild = item =>
  item.map(it => (
    <Children children={it} />
  ));

function App() {
  return (
    <div className="App">
      <h1>Nested Children</h1>
      <ul>{renderChild(data)}</ul>
    </div>
  );
}

另外，我觉得 children 在 React 中是保留的 prop。请看一次。

预览

工作演示： https://codesandbox.io/s/vwqyq40zy

递归渲染反应组件？

Recursively render react component?

reactjs