在react中呈现嵌套JSON的最佳方式？

import React from 'react';

const NestedJSONComponent = ({ data }) => {
  return (
    <ul>
      {Object.entries(data).map(([key, value]) => (
        <li key={key}>
          <strong>{key}: </strong>
          {typeof value === 'object' ? (
            <NestedJSONComponent data={value} />
          ) : (
            value
          )}
        </li>
      ))}
    </ul>
  );
};

export default NestedJSONComponent;

import React from 'react';
import NestedJSONComponent from './NestedJSONComponent';

const App = () => {
  const jsonData = {
    name: 'John',
    age: 25,
    hobbies: ['reading', 'coding'],
    address: {
      street: '123 Main St',
      city: 'New York',
    },
  };

  return (
    <div>
      <h1>Nested JSON Example</h1>
      <NestedJSONComponent data={jsonData} />
    </div>
  );
};

export default App;