React组件，可以解析并显示各种形式的JSON内容

它使用递归的方式遍历JSON对象，并将其渲染为可展开的树形结构。

import React, { useState } from 'react';

const JsonViewer = ({ data }) => {
  const [expanded, setExpanded] = useState(false);

  const handleClick = () => {
    setExpanded(!expanded);
  };

  const renderNode = (key, value) => {
    if (typeof value === 'object' && value !== null) {
      return <JsonViewer data={value} />;
    } else {
      return <span>{value}</span>;
    }
  };

  const renderTree = (data, level = 0) => {
    const keys = Object.keys(data);

    return keys.map((key) => {
      const value = data[key];
      const isObject = typeof value === 'object' && value !== null;
      const hasChildren = isObject && Object.keys(value).length > 0;

      const node = (
        <div style={{ marginLeft: level * 20 }}>
          {isObject && (
            <button onClick={handleClick}>
              {expanded ? '-' : '+'}
            </button>
          )}
          <strong>{key}: </strong>
          {renderNode(key, value)}
        </div>
      );

      if (isObject && expanded && hasChildren) {
        return (
          <div key={key}>
            {node}
            {renderTree(value, level + 1)}
          </div>
        );
      } else {
        return <div key={key}>{node}</div>;
      }
    });
  };

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

export default JsonViewer;

使用该组件时，只需将要显示的JSON对象传递给data属性即可：

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

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

  return (
    <div>
      <h1>JSON Viewer</h1>
      <JsonViewer data={sampleJson} />
    </div>
  );
};

export default App;

这样，传入的sampleJson将会以树形结构显示在页面上。你可以展开和折叠每个对象，并且可以根据需要传入不同的JSON对象进行查看和修改。