116 lines
5.5 KiB
JSON
116 lines
5.5 KiB
JSON
{
|
||
"slug": "link",
|
||
"end": "react",
|
||
"curated": true,
|
||
"summary": "React 端的 Link：disabled 同时切类名与 href，点击经 onClick 回传原生事件，target 透传到 <a>。",
|
||
"usage": [
|
||
"disabled 是双动作：类名切到 `kole-link-disabled`，同时把 href 置为 undefined（`href={disabled ? undefined : href}`），链接不再可跳转（frameworks/Link.jsx:8）。",
|
||
"children 有文字兜底：`{children || '查看详情'}`，不传子节点也会渲染出「查看详情」（frameworks/Link.jsx:8）。",
|
||
"onClick 直接绑在 <a> 上（`onClick={onClick}`），父组件拿到的是原生 MouseEvent，可在里面 preventDefault（frameworks/Link.jsx:8）。",
|
||
"target 透传为原生属性（默认 _self），新窗口打开只需 target=\"_blank\"（frameworks/Link.jsx:4,8）。",
|
||
"variant（primary 默认）未参与渲染：类名没有按 variant 加后缀，样式差异要靠外部 className（frameworks/Link.jsx:4,8）。",
|
||
"onChange / onClose / onSubmit / onLoadMore 都在解构里但没有绑定（frameworks/Link.jsx:4）。"
|
||
],
|
||
"bestPractices": [
|
||
"disabled 只是去掉 href 并加类名，<a> 仍然可聚焦可点：要真正拦住点击需在 onClick 里判断 disabled（frameworks/Link.jsx:8）。",
|
||
"onClick 是可以不传的：不传时点击由 href 决定行为，传了就两件事都会发生（原生跳转 + 回调）（frameworks/Link.jsx:8）。",
|
||
"外层还包了一层 .kole-link-root 的 div，做行内排版时注意这层容器（frameworks/Link.jsx:7）。",
|
||
"variant 传 compact 之类的值不会换样式，示例里的区别其实来自 className（frameworks/Link.jsx:4,8）。"
|
||
],
|
||
"a11y": [
|
||
"根是原生 <a href>（frameworks/Link.jsx:8），键盘聚焦、回车跳转、右键菜单都由浏览器提供。",
|
||
"disabled 状态下 href 被置为 undefined，<a> 失去链接语义但仍留在 Tab 序里（frameworks/Link.jsx:8）。",
|
||
"没有 aria-disabled 标记禁用态，读屏器不会播报「不可用」，只能从去掉 href 后变成纯文本推断（frameworks/Link.jsx:8）。",
|
||
"target=\"_blank\" 时没有 rel=\"noopener noreferrer\"，也没有提示会新开窗口（frameworks/Link.jsx:8）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "React 端的 API 载体是 props 与 onXxx 回调：href / target / disabled / children 决定 <a> 的属性与内容，点击经 onClick 回传原生事件；variant 未参与渲染，没有 v-model。",
|
||
"table": [
|
||
{
|
||
"name": "children",
|
||
"type": "属性",
|
||
"desc": "链接文本，空值兜底「查看详情」（frameworks/Link.jsx:8）"
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"type": "属性",
|
||
"desc": "为真时加 kole-link-disabled 类并把 href 置为 undefined（frameworks/Link.jsx:8）"
|
||
},
|
||
{
|
||
"name": "href",
|
||
"type": "String",
|
||
"desc": "透传到 <a href>，disabled 时被替换为 undefined（frameworks/Link.jsx:8）"
|
||
},
|
||
{
|
||
"name": "onChange",
|
||
"type": "属性",
|
||
"desc": "解构声明但未绑定（frameworks/Link.jsx:4）"
|
||
},
|
||
{
|
||
"name": "onClick",
|
||
"type": "属性",
|
||
"desc": "绑在 <a> 上的点击回调，载荷是原生事件（frameworks/Link.jsx:8）"
|
||
},
|
||
{
|
||
"name": "onClose",
|
||
"type": "属性",
|
||
"desc": "解构声明但未绑定（frameworks/Link.jsx:4）"
|
||
},
|
||
{
|
||
"name": "onLoadMore",
|
||
"type": "属性",
|
||
"desc": "解构声明但未绑定（frameworks/Link.jsx:4）"
|
||
},
|
||
{
|
||
"name": "onSubmit",
|
||
"type": "属性",
|
||
"desc": "解构声明但未绑定（frameworks/Link.jsx:4）"
|
||
},
|
||
{
|
||
"name": "onChange",
|
||
"type": "事件",
|
||
"desc": "React 事件以 onXxx prop 命名；本实现未绑定 onChange（frameworks/Link.jsx:4）"
|
||
},
|
||
{
|
||
"name": "onClick",
|
||
"type": "事件",
|
||
"desc": "onClick 在 <a> 上承载点击回调（frameworks/Link.jsx:8）"
|
||
},
|
||
{
|
||
"name": "onClose",
|
||
"type": "事件",
|
||
"desc": "React 事件以 onXxx prop 命名；本实现未绑定 onClose（frameworks/Link.jsx:4）"
|
||
},
|
||
{
|
||
"name": "children",
|
||
"type": "插槽",
|
||
"desc": "React 无插槽语法，children 即链接文字位（frameworks/Link.jsx:4,8）"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Link.jsx",
|
||
"kind": "React",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
},
|
||
{
|
||
"file": "frameworks/Link.css",
|
||
"kind": "样式",
|
||
"desc": "该组件的样式文件，类名口径以它为准。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"link-ex-1",
|
||
"link-ex-2"
|
||
],
|
||
"notes": [
|
||
"props 解构见 frameworks/Link.jsx:4，共 10 个；<a> 的属性与内容全在第 8 行（类名三元、href 三元、target、onClick）。",
|
||
"variant 未参与渲染见 frameworks/Link.jsx:4 与第 8 行对照；children 兜底与 onClick 直绑同在第 8 行。",
|
||
"实现缺口：variant 未接线、disabled 无点击拦截与 aria-disabled、_blank 无 rel（frameworks/Link.jsx:8）；按实现写，未补。",
|
||
"a11y 依据：原生 <a href> 与 target 透传见 frameworks/Link.jsx:8；全文无 aria-* 与 rel 属性。",
|
||
"apiCarrier.table 保留了自动生成时的「属性 + 事件 + 插槽」三套同名行（onChange / onClick / onClose / children 各两次），本次只改 desc 文案，未调整行结构。"
|
||
]
|
||
}
|