JsonTreeView.tsx

基本信息

• 类型: React 组件 (自定义)
• 路径: ./src/components/ui/json-tree-view.tsx

功能描述

JSON 树形视图组件，以可折叠的树形结构展示 JSON 数据。支持展开/折叠全部、路径追踪、语法高亮等功能。

导出内容

• JsonTreeView - JSON 树形视图组件
• JsonTreeViewWrapper - 包装组件（处理 JSON 字符串解析）

Props 接口

JsonTreeView

属性	类型	必填	默认值	说明
data	unknown	是	-	JSON 数据
className	string	否	-	自定义CSS类名
fontSize	`'xs' \	'sm' \	'base'`	否	'xs'	字体大小
maxDepth	number	否	10	最大展开深度
onExpandAllRef	`React.MutableRefObject<(() => void) \	undefined>`	否	-	展开全部函数的 ref
onCollapseAllRef	`React.MutableRefObject<(() => void) \	undefined>`	否	-	折叠全部函数的 ref

JsonTreeViewWrapper

属性	类型	必填	默认值	说明
content	string	是	-	JSON 字符串
className	string	否	-	自定义CSS类名
fontSize	`'xs' \	'sm' \	'base'`	否	'xs'	字体大小
onExpandAllRef	`React.MutableRefObject<(() => void) \	undefined>`	否	-	展开全部函数的 ref
onCollapseAllRef	`React.MutableRefObject<(() => void) \	undefined>`	否	-	折叠全部函数的 ref

依赖

• lucide-react - 图标库 (ChevronRight, ChevronDown)
• @/lib/utils - 工具函数 (cn)

使用示例

import { JsonTreeView, JsonTreeViewWrapper } from "@/components/ui/json-tree-view";
import { useRef } from "react";

// 使用数据对象
const data = { name: "John", age: 30, hobbies: ["reading", "gaming"] };
<JsonTreeView data={data} fontSize="sm" />

// 使用 JSON 字符串
const jsonString = '{"key": "value", "nested": {"a": 1}}';
<JsonTreeViewWrapper content={jsonString} />

// 带展开/折叠控制
const expandRef = useRef<(() => void) | undefined>(undefined);
const collapseRef = useRef<(() => void) | undefined>(undefined);

<JsonTreeView
  data={largeData}
  onExpandAllRef={expandRef}
  onCollapseAllRef={collapseRef}
/>
<Button onClick={() => expandRef.current?.()}>展开全部</Button>
<Button onClick={() => collapseRef.current?.()}>折叠全部</Button>