文档与路径 <JsonTree />

左边深色窗里是缩进好的 JSON 文档，右边是几条路径表达式和它们的返回值；每一步标出该表达式取到的那几行。

Template and style descriptions are currently available in Chinese only.

See it in the demo deck →

Group: 技术 · 数据 · 文档查询
Component: JsonTree · #json-tree
Interaction: build 模式下每按一次 → 下一条查询出现，并点亮它取到的行

Good for

讲 JSON、YAML 配置的取值方式
讲 JSONB 运算符、JSONPath、jq 之类的路径语法

Avoid when

文档超过 13 行：只保留相关部分
要比较两份文档：用 CodeDiff

Content limits

1	doc 6–13 行；depth 0–4；text ≤ 34 个字符
2	queries 2–4 条：expr ≤ 40 个字符，result ≤ 24 个字符，note ≤ 20 字
3	file ≤ 20 个字符

Fields

Field	Type
`kicker` · required	`string`	标题上方的小节名，2–8 字
`title` · required	`string \| string[]`	页面标题；传数组可手动断行，每项一行
`lead`	`string`	一到两句导语，≤ 60 字
`source`	`string`	事实出处；页面上有任何数据或事实时必填
`hint`	`ReactNode`	页眉中间的操作提示，可用 <kbd>
`doc` · required	`{ depth, text, pick? }[]`	文档行，pick 是取到这一行的查询序号
`queries` · required	`{ expr, result, note? }[]`	路径表达式
`file`	`string`	窗口标题

Example

<JsonTree kicker="JSONB" title="…" doc={[{ depth: 0, text: '{' }, { depth: 1, text: '"name": "Ada",', pick: 0 }, …]} queries={[{ expr: "profile ->> 'name'", result: 'Ada' }, …]} />