如何以递归方式呈现React提供程序？

import React, { createContext } from 'react';

// 创建一个上下文
const MyContext = createContext();

// 创建一个递归组件
const RecursiveComponent = ({ data }) => {
  return (
    <MyContext.Provider value={data}>
      {data.children && data.children.map(child => (
        <RecursiveComponent key={child.id} data={child} />
      ))}
    </MyContext.Provider>
  );
};

// 使用递归组件
const App = () => {
  const data = {
    id: 1,
    name: 'Root',
    children: [
      {
        id: 2,
        name: 'Child 1',
        children: [
          {
            id: 3,
            name: 'Grandchild 1',
            children: []
          },
          {
            id: 4,
            name: 'Grandchild 2',
            children: []
          }
        ]
      },
      {
        id: 5,
        name: 'Child 2',
        children: []
      }
    ]
  };

  return (
    <div>
      <h1>递归呈现React提供程序</h1>
      <RecursiveComponent data={data} />
    </div>
  );
};

export default App;