React中基于层级结构动态渲染复杂JSON数据

import React from 'react';

const renderData = (data) => {
  // 1. 处理对象类型的数据 (例如 "category 1", "sub category 1" 或 { name: "data 1", ... })
  if (typeof data === 'object' && !Array.isArray(data) && data !== null) {
    // 遍历对象的键值对
    return Object.keys(data).map((key, index) => {
      // 关键：为列表中的每个元素提供一个唯一的key
      // 这里使用key和index组合，更健壮的方式是使用数据本身的唯一ID
      const uniqueKey = `${key}-${index}`;

      // 如果键是 "name"，则以粗体样式显示其值
      if (key === 'name') {
        return (
          <span key={uniqueKey} style={{ fontWeight: 'bold', marginRight: '8px' }}>
            {data[key]}
          </span>
        );
      }

      // 如果值是数组，则递归渲染该数组
      if (Array.isArray(data[key])) {
        return (
          <div key={uniqueKey}>
            {/* 对于子类别标题，可以添加特定样式 */}
            <h4 style={{ color: '#555', marginTop: '10px', marginBottom: '5px' }}>{key}:</h4>
            <div style={{ marginLeft: '20px' }}>
              {renderData(data[key])}
            </div>
          </div>
        );
      }

      // 如果值是另一个对象，则递归渲染该对象
      if (typeof data[key] === 'object' && data[key] !== null) {
        return (
          <div key={uniqueKey} style={{ border: '1px solid #eee', padding: '10px', margin: '10px 0' }}>
            {/* 对于主要类别标题 */}
            <h3 style={{ color: '#333', borderBottom: '1px dashed #ccc', paddingBottom: '5px', marginBottom: '10px' }}>{key}</h3>
            <div style={{ marginLeft: '15px' }}>
              {renderData(data[key])}
            </div>
          </div>
        );
      }

      // 处理其他基本类型的值（如果存在）
      return (
        <p key={uniqueKey} style={{ fontSize: '0.9em', color: '#666' }}>
          {key}: {String(data[key])}
        </p>
      );
    });
  }

  // 2. 处理数组类型的数据 (例如 "sub category 1" 中的元素数组 或 "category 2" 的值)
  if (Array.isArray(data)) {
    return data.map((item, index) => {
      const uniqueKey = `array-item-${index}`;
      // 如果数组元素是对象，则递归渲染该对象
      if (typeof item === 'object' && item !== null) {
        return (
          <div key={uniqueKey} style={{ border: '1px solid #ddd', padding: '8px', margin: '5px 0', borderRadius: '4px', backgroundColor: '#f9f9f9' }}>
            {renderData(item)}
          </div>
        );
      }
      // 如果数组元素是基本类型，直接显示
      return <span key={uniqueKey}>{String(item)}</span>;
    });
  }

  // 3. 处理基本类型的数据 (如果直接传入基本类型，例如字符串、数字)
  return <span>{String(data)}</span>;
};

const jsonData = {
  "data": {
    "category 1": {
      "sub category 1": [
        {
          "name": "Data Item A",
          "description": "Description for A",
        },
        {
          "name": "Data Item B",
          "description": "Description for B",
        }
      ],
      "sub category 2": [
        {
          "name": "Data Item C",
          "value": 123,
        },
        {
          "name": "Data Item D",
          "value": 456,
        }
      ]
    },
    "category 2": [
      {
        "name": "Data Item E",
        "status": "active",
      },
      {
        "name": "Data Item F",
        "status": "inactive"
      }
    ],
    "category 3": "A simple string category"
  }
};

const MyComponent = () => {
  const jsonData = {
    "data": {
      "category 1": {
        "sub category 1": [
          {
            "name": "Data Item A",
            "description": "Description for A",
          },
          {
            "name": "Data Item B",
            "description": "Description for B",
          }
        ],
        "sub category 2": [
          {
            "name": "Data Item C",
            "value": 123,
          },
          {
            "name": "Data Item D",
            "value": 456,
          }
        ]
      },
      "category 2": [
        {
          "name": "Data Item E",
          "status": "active",
        },
        {
          "name": "Data Item F",
          "status": "inactive"
        }
      ],
      "category 3": "A simple string category"
    }
  };

  return (
    <div style={{ fontFamily: 'Arial, sans-serif', padding: '20px', border: '1px solid #ccc', borderRadius: '8px' }}>
      <h2 style={{ color: '#007bff' }}>动态数据渲染示例</h2>
      {/* 从jsonData.data开始渲染，因为我们假设顶层有一个"data"键 */}
      {renderData(jsonData.data)}
    </div>
  );
};

export default MyComponent;