Reactjs嵌套对象到嵌套的html

import React from 'react';

// 定义一个组件来表示嵌套的对象
const NestedObject = ({ data }) => {
  return (
    <div>
      {Object.entries(data).map(([key, value]) => {
        if (typeof value === 'object' && value !== null) {
          // 如果属性值是对象，则递归调用NestedObject组件
          return (
            <div key={key}>
              <h3>{key}</h3>
              <NestedObject data={value} />
            </div>
          );
        } else {
          // 如果属性值是基本类型，则直接显示在HTML中
          return (
            <div key={key}>
              <p>{key}: {value}</p>
            </div>
          );
        }
      })}
    </div>
  );
};

// 使用NestedObject组件将嵌套的对象渲染为嵌套的HTML
const App = () => {
  const nestedData = {
    name: 'John',
    age: 30,
    address: {
      street: '123 Main St',
      city: 'New York',
      country: 'USA'
    }
  };

  return (
    <div>
      <h2>Nested Object</h2>
      <NestedObject data={nestedData} />
    </div>
  );
};

export default App;