61 lines
3.3 KiB
JSON
61 lines
3.3 KiB
JSON
{
|
||
"slug": "breadcrumb",
|
||
"end": "react",
|
||
"curated": true,
|
||
"summary": "面包屑：items 数组渲染层级，末项自动标记当前页且不可点击，点击上级经 onSelect 回传对象。",
|
||
"usage": [
|
||
"React 端只接收 items=[{ label }] 与 onSelect 两个 props（Breadcrumb.jsx:4）。",
|
||
"末项由组件按索引判断：最后一项加 is-current 类并且不绑定跳转（Breadcrumb.jsx:10-11），不需要业务侧额外传标志位。",
|
||
"onSelect(it) 回传的是被点项的完整对象而不是下标/字符串（Breadcrumb.jsx:11），父组件可直接取 it.path 之类的自定义字段。",
|
||
"分隔符是组件内固定的「/」span，不在 items 里配置（Breadcrumb.jsx:15）。",
|
||
"列表用 React.Fragment 加索引 key 渲染，因此 items 不需要唯一 id（Breadcrumb.jsx:8）。"
|
||
],
|
||
"bestPractices": [
|
||
"items 的每一项要带够跳转信息（如 path 或 id），onSelect 只给对象，路由跳转由父组件完成。",
|
||
"不要给末项也提供跳转目标，源码已禁止最后一项触发 onSelect，传了也不会被调用。",
|
||
"层级过深时优先在外层做省略处理，组件本身不做折叠或收起。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "React 端的 API 载体是 props 与回调：属性驱动外观（type/size/disabled 等布尔与枚举），交互经 onXxx 回传（如 onChange/onClick/onSelectionChange）；没有 v-model，受控组件固定写成 value + onChange，非受控则用 defaultValue。",
|
||
"table": [
|
||
{
|
||
"name": "items",
|
||
"type": "Array<{ label, ... }>",
|
||
"desc": "层级数据；末项渲染为当前页且不可点击"
|
||
},
|
||
{
|
||
"name": "onSelect",
|
||
"type": "(item) => void",
|
||
"desc": "点击非末项时回调，参数为该项对象"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"容器是 div（Breadcrumb.jsx:6），缺少 nav 地标与 aria-label，读屏无法把面包屑识别为导航区域。",
|
||
"各项是带 onClick 的 span（Breadcrumb.jsx:9-12），没有链接语义、不可通过 Tab 聚焦，跳转型面包屑建议在业务侧改造为锚点或按钮。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Breadcrumb.jsx",
|
||
"kind": "React（React）",
|
||
"desc": "React 端组件实现源码，props 与回调的唯一定义处"
|
||
},
|
||
{
|
||
"file": "frameworks/Breadcrumb.css",
|
||
"kind": "样式",
|
||
"desc": "该 React 实现依赖的样式文件"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"breadcrumb-ex-1"
|
||
],
|
||
"notes": [
|
||
"frameworks/Breadcrumb.jsx:4 中可指到 items（Array<{ label, ... }>）——层级数据；末项渲染为当前页且不可点击",
|
||
"frameworks/Breadcrumb.jsx:4 中可指到 onSelect（(item) => void）——点击非末项时回调，参数为该项对象",
|
||
"props 解构清单见 frameworks/Breadcrumb.jsx:4-4；本文件 table 只列该端真正消费的属性与回调。",
|
||
"过滤口径：事实包 consumedApi 里还包含绑在组件内部节点上的同名处理器（如 onClick/onChange 绑在内部 button、input、checkbox 上，见 frameworks/Breadcrumb.jsx 全文），它们不是对外 props，因此未进 table。",
|
||
"table 构成核验：2 行中 2 行是 frameworks/Breadcrumb.jsx 解构出的顶层 props（解构块 frameworks/Breadcrumb.jsx:4-4）；本组件 table 全部为顶层 props。"
|
||
]
|
||
}
|