React中递归渲染复杂嵌套JSON数据并进行样式区分的教程

import React from 'react';

/**
 * 递归渲染JSON数据，并根据数据类型和层级应用不同样式。
 * @param {object | array} data - 要渲染的JSON数据片段。
 * @returns {JSX.Element | JSX.Element[]} - 渲染后的JSX元素。
 */
const renderData = (data) => {
  // 1. 判断是否为对象类型（非数组对象）
  if (typeof data === 'object' && !Array.isArray(data)) {
    // 遍历对象的键
    return Object.keys(data).map((key, index) => {
      // 使用key作为React列表的唯一标识，防止警告
      // 注意：在实际应用中，如果数据项有唯一ID，应优先使用ID作为key
      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} style={{ marginLeft: '20px', borderLeft: '1px solid #ccc', paddingLeft: '10px', marginTop: '10px' }}>
            <h4 style={{ margin: '5px 0' }}>{key}</h4> {/* 数组的父级标题 */}
            {renderData(data[key])}
          </div>
        );
      }

      // 如果值是另一个对象，递归渲染对象内容，并显示其键作为标题
      if (typeof data[key] === 'object' && data[key] !== null) {
        return (
          <div key={uniqueKey} style={{ marginLeft: '10px', marginTop: '15px' }}>
            <h3 style={{ margin: '10px 0', color: '#333' }}>{key}</h3> {/* 对象父级标题 */}
            {renderData(data[key])}
          </div>
        );
      }

      // 处理其他基本类型的值
      return <p key={uniqueKey} style={{ color: '#666' }}>{key}: {data[key]}</p>;
    });
  }

  // 2. 判断是否为数组类型
  if (Array.isArray(data)) {
    // 遍历数组元素
    return data.map((item, index) => {
      // 使用index作为key，仅在列表项没有稳定ID时使用
      const uniqueKey = `array-item-${index}`;
      // 如果数组元素是对象，递归渲染该对象
      if (typeof item === 'object' && item !== null) {
        return (
          <div key={uniqueKey} style={{ border: '1px solid #eee', padding: '10px', margin: '5px 0', borderRadius: '4px' }}>
            {renderData(item)}
          </div>
        );
      }
      // 如果数组元素是基本类型，直接显示
      return <span key={uniqueKey} style={{ display: 'block', padding: '2px 0' }}>{item}</span>;
    });
  }

  // 3. 处理基本类型（例如，如果直接传入一个字符串或数字）
  return <span>{data}</span>;
};

// 包含复杂JSON数据的React组件
const MyComponent = () => {
  const jsonData = {
    "data": {
      "category 1": {
        "sub category 1": [
          {
            "name": "data 1",
            "something else": "value 1",
          },
          {
            "name": "data 2",
            "something else": "value 2",
          }
        ],
        "sub category 2": [
          {
            "name": "data 3",
            "something else": "value 3",
          },
          {
            "name": "data 4",
            "something else": "value 4",
          }
        ]
      },
      "category 2": [
        {
          "name": "data 5",
          "something else": "value 5",
        },
        {
          "name": "data 6",
          "something else": "value 6"
        }
      ],
      "singleValue": "This is a single value"
    }
  };

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

export default MyComponent;