在React/JSX中显示嵌套的JSON

const nestedJSON = {
  name: "John",
  age: 30,
  address: {
    street: "123 Main St",
    city: "New York",
    country: "USA"
  },
  hobbies: ["reading", "traveling", "coding"]
};

import React from "react";

const NestedJSONComponent = ({ data }) => {
  const renderNestedJSON = (data) => {
    return Object.entries(data).map(([key, value]) => {
      if (typeof value === "object") {
        return (
          <div key={key}>
            <strong>{key}: </strong>
            <NestedJSONComponent data={value} />
          </div>
        );
      } else if (Array.isArray(value)) {
        return (
          <div key={key}>
            <strong>{key}: </strong>
            {value.map((item, index) => (
              <span key={index}>{item}, </span>
            ))}
          </div>
        );
      } else {
        return (
          <div key={key}>
            <strong>{key}: </strong>
            {value}
          </div>
        );
      }
    });
  };

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

export default NestedJSONComponent;

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

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

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

export default App;