如何在 React 组件中渲染嵌套 JSON 数据并按键分组生成多个无序列表

本文讲解如何正确解析并渲染结构化 json 数据（如按 `h3`、`h4`、`h5` 键分组的字符串数组），使用 `object.entries()` 保留键名与值的映射关系，为每个键动态生成带标题的 `

` 列表。

在 React 中渲染 JSON 数据时，关键在于保持数据结构语义。你提供的数据是一个对象，其每个属性（如 "h3"、"h4"）对应一个字符串数组，目标是为每个属性名生成一个标题（如

h3

），再渲染其数组内容为独立的
列表。直接使用 Object.values()（如原代码所示）会丢失键名信息，导致无法区分不同数组来源，且破坏可读性与可维护性。

✅ 正确做法是使用 Object.entries() —— 它将对象转换为 [key, value] 元组数组，既保留键名（用于标题），又可直接访问对应数组（用于

• 渲染）。以下是优化后的完整组件示例：

  import { Disclosure } from '@headlessui/react';
  
  const DisclosureHelper = ({ data }) => {
    // 确保 data.value 存在，避免运行时错误
    const value = data?.value || {};
  
    // 转换为 [key, array] 形式的条目数组：[['h3', [...]], ['h4', [...]], ...]
    const entries = Object.entries(value);
  
    // 逐项渲染：每个 key 作为标题，每个 value 数组作为列表项
    const lists = entries.map(([key, items], index) => (
      
  
        {/* 动态使用键名作为语义化标题（也可映射为真实 HTML 标签，见下方扩展） */}
        
  {key}
        
  
          {items.map((item, idx) => (
            
  {item}
          ))}
        
      
    ));
  
    return 
  {lists}
  ;
  };
  
  export default DisclosureHelper;

  ? 注意事项与最佳实践：

  • 键名映射增强语义（可选）：若 h3/h4/h5 是真实 HTML 标签名而非仅标识符，可进一步动态渲染：

    const Tag = key; // 如 key === 'h3' → 
    ...
    return (
      
    
        {key}
        
    ...
      
    );

    ⚠️ 注意：需确保 key 是合法 React 元素类型（如 'h3' 字符串可直接用作 JSX 标签名），且符合语义化 HTML 规范。

    

    网易人工智能

    网易数帆多媒体智能生产力平台

    下载

  • 空值防护：始终对 data?.value 做可选链处理，避免 undefined 导致 Object.entries(undefined) 报错。

  • key 的选择：外层 map 使用 index 作为 key 仅在数据顺序固定且无增删时安全；若数据可能动态变化，建议用 key 字符串（如 key={key}）更稳妥。

  • 样式与可访问性：为

    添加 list-disc 和间距类提升视觉层次；为
    • 添加 key 确保 React 列表更新高效；必要时加入 aria-label 增强无障碍支持。

    通过 Object.entries() + 解构赋值，你不仅能清晰表达“每个键对应一组列表”的业务逻辑，还能写出高内聚、易调试、符合 React 最佳实践的渲染代码。