如何优化可展示多数据类型对象的React UI组件？

现有实现的用户友好性缺陷 #

• 固定类型排序逻辑不符合通用浏览习惯：多数场景下用户更关注业务属性强的字段，强制按「字符串>数字/布尔值>数组>对象」排序会打散关联业务字段，大幅提升字段查找成本
• 嵌套结构无折叠交互：全量展开深层级对象会导致页面冗余过长，数据量稍大就会出现定位困难的问题
• 特殊数据类型无适配展示：例如示例中的$date时间戳直接展示为纯数字，用户无法直接识别时间；null、空对象等特殊值无明确标识，容易和空字符串等正常值混淆
• 无快速定位能力：字段数量较多时，没有搜索、高亮等辅助能力，用户查找目标字段效率极低

具体优化实现方案 #

1. 排序逻辑优化 #

保留原有类型排序作为可选模式，新增两种优先级更高的排序规则：

• 自定义业务优先级排序：支持外部传入priorityKeys数组指定置顶展示的业务字段，剩余字段再按类型或字母序排序
• 字段名字母序排序：支持按字段名正/倒序排列，适配用户按名称找字段的需求

排序逻辑代码示例：

const sortEntries = (entries, priorityKeys = []) => {
  const getTypePriority = (val) => {
    if (typeof val === 'string') return 1
    if (typeof val === 'number' || typeof val === 'boolean') return 2
    if (Array.isArray(val)) return 3
    if (typeof val === 'object' && val !== null) return 4
    return 5
  }
  return entries.sort(([keyA, valA], [keyB, valB]) => {
    // 优先走自定义业务优先级
    const indexA = priorityKeys.indexOf(keyA)
    const indexB = priorityKeys.indexOf(keyB)
    if (indexA !== -1 && indexB !== -1) return indexA - indexB
    if (indexA !== -1) return -1
    if (indexB !== -1) return 1
    // 无自定义优先级时按类型排序
    return getTypePriority(valA) - getTypePriority(valB)
  })
}

2. 分层展示交互优化 #

• 嵌套对象、数组默认折叠，仅展示第一层字段，点击可切换展开/收起状态，同时标注子元素数量，例如foo11 (对象 · 4个属性)、foo28 (数组 · 2个元素)
• 不同类型值做样式区分：字符串用绿色、数字用蓝色、布尔值用橙色、null/undefined用灰色，时间戳直接格式化为可读时间字符串
• 支持层级缩进，直观展示字段从属关系

递归渲染组件代码示例：

import { useState } from 'react'

const DataField = ({ keyName, value, level = 0 }) => {
  const [isExpanded, setIsExpanded] = useState(false)
  // 特殊字段预处理
  if (value?.$date) {
    value = new Date(value.$date * 1000).toLocaleString()
  }

  const renderValue = () => {
    if (value === null) return <span style={{color: '#999'}}>null</span>
    if (typeof value === 'boolean') return <span style={{color: '#f5a623'}}>{String(value)}</span>
    if (typeof value === 'string') return <span style={{color: '#7ed321'}}>"{value}"</span>
    if (typeof value === 'number') return <span style={{color: '#4a90e2'}}>{value}</span>
    if (Array.isArray(value)) {
      return (
        <>
          <span onClick={() => setIsExpanded(!isExpanded)} style={{cursor: 'pointer', userSelect: 'none'}}>
            数组 · {value.length}个元素 {isExpanded ? '▼' : '▶'}
          </span>
          {isExpanded && (
            <div style={{marginLeft: 24}}>
              {value.map((item, idx) => (
                <DataField key={idx} keyName={String(idx)} value={item} level={level + 1} />
              ))}
            </div>
          )}
        </>
      )
    }
    if (typeof value === 'object') {
      const entries = Object.entries(value)
      return (
        <>
          <span onClick={() => setIsExpanded(!isExpanded)} style={{cursor: 'pointer', userSelect: 'none'}}>
            对象 · {entries.length}个属性 {isExpanded ? '▼' : '▶'}
          </span>
          {isExpanded && (
            <div style={{marginLeft: 24}}>
              {sortEntries(entries).map(([k, v]) => (
                <DataField key={k} keyName={k} value={v} level={level + 1} />
              ))}
            </div>
          )}
        </>
      )
    }
    return String(value)
  }

  return (
    <div style={{padding: '6px 0'}}>
      <span style={{fontWeight: 500, marginRight: 10}}>{keyName}:</span>
      {renderValue()}
    </div>
  )
}

3. 可选增强功能 #

• 顶部增加搜索框，支持按字段名、字段值模糊搜索，匹配的字段做高亮展示
• 单个字段支持一键复制值，全量数据支持一键导出格式化JSON
• 增加全局操作按钮，支持一键展开/收起所有嵌套层级，或者切换为原始JSON视图

内容的提问来源于stack exchange，提问作者Kayode Issac Ayodele