您可以使用类似于以下内容的内容：

class App extends React.Component {
    render() {
const familiy = [
    {
      data: { id: "John", age: 90 },
      children: [
        {
          data: { id: "Mary", age: 60 },
          children: [{ data: { id: "Mercy", age: 45 } }],
        },
        {
          data: { id: "Paul", age: 60 },
        },
        {
          data: { id: "Dolores", age: 55 },
        },
      ],
    }
  ];

  const renderChildren = (v) => {
    return (
      <li key={v.data.id}>
        {v.data.id}, Age: {v.data.age}
        <ul>
          {v.children &&
            v.children.map((v2) => {
              return renderChildren(v2);
            })}
        </ul>
      </li>
    );
  };

  return (
    <div>
      <h1>Parent Child Tree</h1>
      <div>Render nested array of objects of parent-child relationship as a tree</div>
      <ul>
            {familiy.map((v) => {
              return renderChildren(v);
            })}
          </ul>
    </div>
  );
    }
}

// Render it
ReactDOM.createRoot(
    document.getElementById("root")
).render(
    <App />
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>