109 lines
5.6 KiB
JSON
109 lines
5.6 KiB
JSON
{
|
||
"slug": "button",
|
||
"end": "react",
|
||
"curated": true,
|
||
"summary": "按钮：类型与状态全走 props（type/size/loading/icon），点击经 onClick 回调。",
|
||
"usage": [
|
||
"React 端把按钮的一切都写成 JSX 属性：<Button type=\"primary\" size=\"large\" icon={d} onClick={save}>保存</Button>，没有插槽语法也没有 v-model。",
|
||
"文本有两种给法——children 优先，text 仅作兜底：源码 btn-label 渲染的是 children || text（Button.jsx:53）。",
|
||
"加载态自管：传 loading 会渲染 spinner（aria-hidden）并自动置 disabled 语义，不必再手写 disabled。",
|
||
"icon 收的是 SVG path 的 d 字符串，组件内联渲染 16×16 的 svg（Button.jsx:45-51），不是图标组件实例。",
|
||
"受控交互只经由 onClick 一个回调；onClick 在 isDisabled 时被短路（Button.jsx:36-39），父组件无需二次判空。"
|
||
],
|
||
"bestPractices": [
|
||
"想透传 aria-label、type=\"submit\" 等原生属性，直接写在 <Button> 上即可——组件把剩余属性 ...rest 铺到了原生 button 上（Button.jsx:23,42）。",
|
||
"className 会追加到内部类名数组末尾，用于布局微调；不要用它覆盖 btn-{type} 与 btn-md 这些状态类。",
|
||
"危险操作用 type=\"danger\" 而非自定红色样式，删除类按钮在示例里固定配 type=\"danger\"。",
|
||
"loading 与 disabled 视觉可分：源码只在「禁用但不加载」时加 btn-disabled，加载态用 is-loading（Button.jsx:31-32）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "React 端的 API 载体是 props 与回调：属性驱动外观（type/size/disabled 等布尔与枚举），交互经 onXxx 回传（如 onChange/onClick/onSelectionChange）；没有 v-model，受控组件固定写成 value + onChange，非受控则用 defaultValue。",
|
||
"table": [
|
||
{
|
||
"name": "type",
|
||
"type": "'primary' | 'default' | 'text' | 'link' | 'danger'",
|
||
"desc": "按钮类型，映射为 btn-{type} 类（源码默认 default）"
|
||
},
|
||
{
|
||
"name": "size",
|
||
"type": "'large' | 'default' | 'small'",
|
||
"desc": "尺寸，经 sizeMap 映射为 btn-lg / btn-md / btn-sm"
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"type": "boolean",
|
||
"desc": "禁用，与 loading 合并为 isDisabled"
|
||
},
|
||
{
|
||
"name": "loading",
|
||
"type": "boolean",
|
||
"desc": "加载态，渲染 spinner 并阻止 onClick"
|
||
},
|
||
{
|
||
"name": "icon",
|
||
"type": "string",
|
||
"desc": "SVG path 的 d 值，非空且非 loading 时渲染 16×16 内联图标"
|
||
},
|
||
{
|
||
"name": "text",
|
||
"type": "string",
|
||
"desc": "按钮文本兜底值，children 为空时才使用"
|
||
},
|
||
{
|
||
"name": "children",
|
||
"type": "ReactNode",
|
||
"desc": "按钮主内容，优先级高于 text"
|
||
},
|
||
{
|
||
"name": "className",
|
||
"type": "string",
|
||
"desc": "追加的外部类名"
|
||
},
|
||
{
|
||
"name": "onClick",
|
||
"type": "(e) => void",
|
||
"desc": "点击回调，禁用或加载时不会被调用"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"根节点是原生 <button>，键盘 Enter/Space 触发与焦点环由浏览器提供，不要改成 div + onClick。",
|
||
"disabled 走原生属性 disabled={isDisabled}（Button.jsx:42），辅助技术能正确播报不可用状态。",
|
||
"加载指示器 <span className=\"spinner\" aria-hidden=\"true\" /> 已对读屏隐藏（Button.jsx:43）；若按钮文字会随加载变化，应在业务侧同步 aria-label。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Button.jsx",
|
||
"kind": "React（React）",
|
||
"desc": "React 端组件实现源码，props 与回调的唯一定义处"
|
||
},
|
||
{
|
||
"file": "frameworks/Button.css",
|
||
"kind": "样式",
|
||
"desc": "该 React 实现依赖的样式文件"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"button-ex-1",
|
||
"button-ex-2",
|
||
"button-ex-3",
|
||
"button-ex-4",
|
||
"button-ex-5"
|
||
],
|
||
"notes": [
|
||
"frameworks/Button.jsx:7 中可指到 type（'primary' | 'default' | 'text' | 'link' | 'danger'）——按钮类型，映射为 btn-{type} 类（源码默认 default）",
|
||
"frameworks/Button.jsx:8 中可指到 size（'large' | 'default' | 'small'）——尺寸，经 sizeMap 映射为 btn-lg / btn-md / btn-sm",
|
||
"frameworks/Button.jsx:9 中可指到 disabled（boolean）——禁用，与 loading 合并为 isDisabled",
|
||
"frameworks/Button.jsx:9 中可指到 loading（boolean）——加载态，渲染 spinner 并阻止 onClick",
|
||
"frameworks/Button.jsx:9 中可指到 icon（string）——SVG path 的 d 值，非空且非 loading 时渲染 16×16 内联图标",
|
||
"frameworks/Button.jsx:7 中可指到 text（string）——按钮文本兜底值，children 为空时才使用",
|
||
"frameworks/Button.jsx:9 中可指到 children（ReactNode）——按钮主内容，优先级高于 text",
|
||
"frameworks/Button.jsx:20 中可指到 className（string）——追加的外部类名",
|
||
"frameworks/Button.jsx:22 中可指到 onClick（(e) => void）——点击回调，禁用或加载时不会被调用",
|
||
"props 解构清单见 frameworks/Button.jsx:13-24；本文件 table 只列该端真正消费的属性与回调。",
|
||
"过滤口径：事实包 consumedApi 里还包含绑在组件内部节点上的同名处理器（如 onClick/onChange 绑在内部 button、input、checkbox 上，见 frameworks/Button.jsx 全文），它们不是对外 props，因此未进 table。",
|
||
"table 构成核验：9 行中 9 行是 frameworks/Button.jsx 解构出的顶层 props（解构块 frameworks/Button.jsx:13-24）；本组件 table 全部为顶层 props。"
|
||
]
|
||
}
|