React JSX中按层级展示嵌套JSON并定制样式求助

问题场景 #

你有如下结构的JSON数据（实际规模更大）：

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

需要区分一级分类、子分类、含name的 data 项，按层级应用样式并渲染。

解决方案：递归渲染 + 层级样式区分 #

核心思路是通过递归函数遍历不同嵌套层级的JSON结构，根据节点类型（对象/数组）判断层级，绑定对应样式。

1. 定义层级样式

先为不同层级元素定义CSS类：

/* 容器样式 */
.data-container {
  max-width: 800px;
  margin: 2rem auto;
  padding: 0 1rem;
}

/* 一级分类样式 */
.category {
  margin: 1.5rem 0;
  padding: 1rem;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
}

/* 子分类样式 */
.sub-category {
  margin: 1rem 0 1rem 1.5rem;
  padding: 0.8rem;
  background-color: #f5f5f5;
  border-radius: 4px;
}

/* 数据项样式 */
.data-item {
  margin: 0.5rem 0 0.5rem 3rem;
  padding: 0.3rem;
  color: #333;
  font-size: 0.95rem;
}

2. React组件实现（含递归渲染）

直接在JSX中通过递归函数处理所有层级：

import React from 'react';
import './DataRenderer.css';

const DataRenderer = ({ data }) => {
  // 递归渲染节点的函数
  const renderNode = (nodeKey, nodeValue, level) => {
    // 情况1：当前节点是数据数组（含name的对象）
    if (Array.isArray(nodeValue)) {
      const titleTag = `h${level + 1}`;
      const TitleTag = titleTag;
      
      return (
        <div key={nodeKey} className={level === 1 ? 'category' : 'sub-category'}>
          <TitleTag>{nodeKey}</TitleTag>
          {nodeValue.map((item, idx) => (
            <div key={idx} className="data-item">
              <span className="item-name">{item.name}</span>
              {/* 可选：渲染其他字段 */}
              {item['something else'] && (
                <span className="item-extra"> - {item['something else']}</span>
              )}
            </div>
          ))}
        </div>
      );
    }
    // 情况2：当前节点是包含子分类的对象，递归处理子节点
    else if (typeof nodeValue === 'object' && nodeValue !== null) {
      return (
        <div key={nodeKey} className="category">
          <h2>{nodeKey}</h2>
          {Object.entries(nodeValue).map(([subKey, subValue]) => 
            renderNode(subKey, subValue, 2)
          )}
        </div>
      );
    }
    return null;
  };

  return (
    <div className="data-container">
      {Object.entries(data).map(([key, value]) => renderNode(key, value, 1))}
    </div>
  );
};

export default DataRenderer;

3. 使用组件

在父组件中传入JSON数据：

import DataRenderer from './DataRenderer';

const App = () => {
  const jsonData = {
    // 你的完整JSON数据
    "category 1": { /* ... */ },
    "category 2": [ /* ... */ ]
  };

  return <DataRenderer data={jsonData} />;
};

关键说明 #

• 递归适配嵌套：无论JSON嵌套多少层，递归函数都会自动遍历处理，无需修改核心逻辑
• 层级区分：通过level参数判断当前节点层级，绑定对应的样式类和标题标签
• 灵活扩展：可以根据需求修改样式、添加字段渲染逻辑，或者为数据项替换唯一key（建议用item.id而非idx，避免渲染性能问题）

内容的提问来源于stack exchange，提问作者Alex