React教程：根据层级结构动态渲染嵌套JSON数据

{
  "data": {
    "category 1": {
      "sub category 1": [
        { "name": "data 1", "soemthing else": "" },
        { "name": "data 2", "soemthing else": "" }
      ],
      "sub category 2": [
        { "name": "data 3", "soemthing else": "" },
        { "name": "data 4", "soemthing else": "" }
      ]
    },
    "category 2": [
      { "name": "data 5", "soemthing else": "" },
      { "name": "data 6", "soemthing else": "" }
    ]
  }
}

import React from 'react';

const renderData = (data, parentKey = 'root') => {
  // 1. 处理对象类型数据 (非null且非数组)
  if (typeof data === 'object' && data !== null && !Array.isArray(data)) {
    return Object.keys(data).map((key, index) => {
      // 为React列表生成唯一key
      const currentKey = `${parentKey}-${key}-${index}`;

      // 特殊处理 'name' 键
      if (key === 'name') {
        return (
          <span key={currentKey} style={{ fontWeight: 'bold', marginRight: '5px' }}>
            {data[key]}
          </span>
        );
      }

      // 如果值是数组，递归渲染并包裹在div中以保持结构
      if (Array.isArray(data[key])) {
        return (
          <div key={currentKey} style={{ marginLeft: '20px', borderLeft: '1px solid #ccc', paddingLeft: '10px' }}>
            <h4>{key} (列表)</h4> {/* 示例：为数组子项添加标题 */}
            {renderData(data[key], currentKey)}
          </div>
        );
      }

      // 默认对象子项渲染：显示键作为标题，并递归渲染其值
      return (
        <div key={currentKey} style={{ marginLeft: '15px', marginTop: '10px', padding: '5px', border: '1px solid #eee' }}>
          <h3>{key}</h3>
          {renderData(data[key], currentKey)}
        </div>
      );
    });
  }

  // 2. 处理数组类型数据
  if (Array.isArray(data)) {
    return data.map((item, index) => {
      const currentKey = `${parentKey}-item-${index}`;

      // 如果数组项是对象，递归渲染
      if (typeof item === 'object' && item !== null) {
        return (
          <div key={currentKey} style={{ borderBottom: '1px dashed #ddd', paddingBottom: '5px', marginBottom: '5px' }}>
            {renderData(item, currentKey)}
          </div>
        );
      }
      // 如果数组项是原始值，直接渲染
      return <span key={currentKey}>{item}</span>;
    });
  }

  // 3. 处理原始值（如字符串、数字等）
  // 如果数据本身就是原始值（非对象也非数组），直接渲染
  return <span key={parentKey}>{String(data)}</span>;
};

// MyComponent.jsx
import React from 'react';
// 假设 renderData 函数已在同一文件或已导入

const MyComponent = () => {
  const jsonData = {
    "data": {
      "category 1": {
        "sub category 1": [
          {
            "name": "data 1",
            "soemthing else": "value 1",
          },
          {
            "name": "data 2",
            "soemthing else": "value 2",
          }
        ],
        "sub category 2": [
          {
            "name": "data 3",
            "soemthing else": "value 3",
          },
          {
            "name": "data 4",
            "soemthing else": "value 4",
          }
        ]
      },
      "category 2": [
        {
          "name": "data 5",
          "soemthing else": "value 5",
        },
        {
          "name": "data 6",
          "soemthing else": "value 6"
        }
      ],
      "single_value": "just a string" // 示例：添加一个原始值
    }
  };

  return (
    <div style={{ padding: '20px', fontFamily: 'Arial, sans-serif' }}>
      <h1>动态渲染JSON数据</h1>
      {/* 从 jsonData.data 开始渲染 */}
      {renderData(jsonData.data, 'main-data')}
    </div>
  );
};

export default MyComponent;