在react js中呈现嵌套的json数据

import React from 'react';

const NestedJson = ({ data }) => {
  const renderData = (data) => {
    if (Array.isArray(data)) {
      return data.map((item, index) => (
        <li key={index}>{renderData(item)}</li>
      ));
    } else if (typeof data === 'object') {
      return (
        <ul>
          {Object.entries(data).map(([key, value]) => (
            <li key={key}>
              <strong>{key}: </strong>
              {renderData(value)}
            </li>
          ))}
        </ul>
      );
    } else {
      return data;
    }
  };

  return <div>{renderData(data)}</div>;
};

export default NestedJson;

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

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

  return (
    <div>
      <h1>Nested JSON Data</h1>
      <NestedJson data={data} />
    </div>
  );
};

export default App;