在React中递归渲染嵌套JSON数据并按层级应用样式

import React from 'react';

/**
 * 递归渲染JSON数据，根据层级和键名应用不同样式。
 * @param {object|Array} data - 需要渲染的JSON数据片段。
 * @returns {JSX.Element[]} 渲染后的JSX元素数组。
 */
const renderData = (data) => {
  // 1. 处理对象类型的数据（非数组）
  if (typeof data === 'object' && !Array.isArray(data)) {
    return Object.keys(data).map((key, index) => {
      // 为每个映射的元素提供一个唯一的key，提高React性能和稳定性
      const uniqueKey = `${key}-${index}`;

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

      // 如果当前键的值是一个数组，则递归渲染该数组
      if (Array.isArray(data[key])) {
        return (
          <div key={uniqueKey} style={{ marginLeft: '20px' }}>
            <h4>{key}</h4> {/* 数组键通常表示一个集合，可作为子标题 */}
            {renderData(data[key])}
          </div>
        );
      }

      // 如果当前键的值是另一个对象，表示这是一个新的类别或子类别
      // 使用h3标签显示类别名称，并递归渲染其内容
      return (
        <div key={uniqueKey} style={{ border: '1px solid #eee', padding: '10px', margin: '10px 0' }}>
          <h3>{key}</h3> {/* 类别标题 */}
          <div style={{ marginLeft: '15px' }}>
            {renderData(data[key])} {/* 递归渲染子对象 */}
          </div>
        </div>
      );
    });
  }

  // 2. 处理数组类型的数据
  if (Array.isArray(data)) {
    return data.map((item, index) => {
      // 为每个数组项提供一个唯一的key
      const uniqueKey = `item-${item.name || index}`; // 尝试使用name作为key，否则使用索引

      // 如果数组项是一个对象，则递归渲染该对象
      if (typeof item === 'object' && item !== null) {
        return (
          <div key={uniqueKey} style={{ borderBottom: '1px dotted #ccc', padding: '5px', margin: '5px 0' }}>
            {renderData(item)} {/* 递归渲染对象项 */}
          </div>
        );
      }

      // 如果数组项是基本类型（本例中JSON不包含，但作为通用处理）
      return <span key={uniqueKey}>{item}</span>;
    });
  }

  // 3. 处理基本类型数据（例如，直接的字符串或数字，虽然本例中主要通过'name'键处理）
  return <span>{data}</span>;
};

// React组件，用于展示渲染结果
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"
        }
      ]
    }
  };

  return (
    <div style={{ fontFamily: 'Arial, sans-serif', padding: '20px' }}>
      <h1>嵌套数据渲染示例</h1>
      {/* 从jsonData.data开始渲染，因为顶层是一个名为"data"的键 */}
      {renderData(jsonData.data)}
    </div>
  );
};

export default MyComponent;