如何动态呈现嵌套对象？

import React from 'react';

// 假设我们有以下嵌套对象
const nestedObject = {
  name: 'Root',
  children: [
    {
      name: 'Child1',
      children: [
        { name: 'GrandChild1' },
        { name: 'GrandChild2' }
      ]
    },
    {
      name: 'Child2',
      children: [
        { name: 'GrandChild3' }
      ]
    }
  ]
};

// 定义一个递归组件来渲染嵌套对象
function NestedObjectRenderer({ obj }) {
  return (
    <div>
      <h3>{obj.name}</h3>
      {obj.children && (
        <ul>
          {obj.children.map((child, index) => (
            <li key={index}>
              <NestedObjectRenderer obj={child} />
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

// 在主组件中使用递归组件
function App() {
  return (
    <div className="App">
      <NestedObjectRenderer obj={nestedObject} />
    </div>
  );
}

export default App;