- 分组
- 技术 · 数据 · 文档查询
- 组件
JsonTree·#json-tree- 交互
- build 模式下每按一次 → 下一条查询出现，并点亮它取到的行
适合
- 讲 JSON、YAML 配置的取值方式
- 讲 JSONB 运算符、JSONPath、jq 之类的路径语法
不适合
- 文档超过 13 行：只保留相关部分
- 要比较两份文档：用 CodeDiff
内容上限
| 1 | doc 6–13 行；depth 0–4；text ≤ 34 个字符 |
| 2 | queries 2–4 条：expr ≤ 40 个字符，result ≤ 24 个字符，note ≤ 20 字 |
| 3 | file ≤ 20 个字符 |
字段
| 字段 | 类型 | |
|---|---|---|
kicker · 必填 | string | 标题上方的小节名，2–8 字 |
title · 必填 | string | string[] | 页面标题；传数组可手动断行，每项一行 |
lead | string | 一到两句导语，≤ 60 字 |
source | string | 事实出处；页面上有任何数据或事实时必填 |
hint | ReactNode | 页眉中间的操作提示，可用 <kbd> |
doc · 必填 | { depth, text, pick? }[] | 文档行，pick 是取到这一行的查询序号 |
queries · 必填 | { expr, result, note? }[] | 路径表达式 |
file | string | 窗口标题 |
示例代码
<JsonTree kicker="JSONB" title="…" doc={[{ depth: 0, text: '{' }, { depth: 1, text: '"name": "Ada",', pick: 0 }, …]} queries={[{ expr: "profile ->> 'name'", result: 'Ada' }, …]} />