116 lines
5.9 KiB
JSON
116 lines
5.9 KiB
JSON
{
|
||
"slug": "alert",
|
||
"end": "react",
|
||
"curated": true,
|
||
"summary": "React 端的 Alert：title 与 description 两个 prop 定内容，closable 用三元控制关闭按钮，关闭经 onClose 回调上报。",
|
||
"usage": [
|
||
"无状态函数组件，外观完全由 props 决定：title 与 description 直接插进 JSX 的文本位，没有内部 state（frameworks/Alert.jsx:8）。",
|
||
"closable 走 JSX 三元分支 `{closable ? <button /> : null}`，只有为真时才挂出右上角的 × 按钮（frameworks/Alert.jsx:8）。",
|
||
"关闭经 onClose 回调上报（按钮上写 onClick={onClose}），组件不自己藏起来，父组件要回调里改状态（frameworks/Alert.jsx:8）。",
|
||
"onChange / onClick / onSubmit / onLoadMore 虽在解构签名里声明，但 JSX 没有绑定任何一处，传了不会触发（frameworks/Alert.jsx:4）。",
|
||
"children 同样未被渲染，内容只能走 title + description 两个字符串 prop（frameworks/Alert.jsx:4,8）。",
|
||
"type 有默认值 info，但类名固定是 `kole-alert kole-alert-alert`，没有按 type 拼 is-xxx 分支（frameworks/Alert.jsx:4,8）。"
|
||
],
|
||
"bestPractices": [
|
||
"type 传 success / warning / error 不会改变外观：实现没有 is-${type} 拼接，四种类型的差异得由 Alert.css 或外层结构体现（frameworks/Alert.jsx:8）。",
|
||
"关闭是单向上报：组件没有 visible 类开关，隐藏提示必须由父组件在 onClose 里改自己的状态（frameworks/Alert.jsx:8）。",
|
||
"想彻底去掉关闭按钮用 closable={false}；React 里裸写 closable 等同 closable={true}，示例 alert-ex-2 就是这么写的。",
|
||
"onChange / onSubmit / onLoadMore 是空声明，绑事件不会响应，别按它们设计交互（frameworks/Alert.jsx:4）。"
|
||
],
|
||
"a11y": [
|
||
"内层容器带 role=\"alert\"（frameworks/Alert.jsx:8），内容更新会被读屏器当实时区域播报，适合风险与结果提示。",
|
||
"关闭按钮是真 <button type=\"button\"> 且带 aria-label=\"关闭\"（frameworks/Alert.jsx:8），键盘可聚焦、读屏器有可访问名。",
|
||
"closable={false} 时关闭按钮整块不渲染（三元返回 null），不会留下不可见的空按钮（frameworks/Alert.jsx:8）。",
|
||
"标题用 <strong> 而非标题元素，副文本用 <br /> 分行，长提示在多级大纲里不会被列为标题（frameworks/Alert.jsx:8）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "React 端的 API 载体是 props 与回调：签名里解构出 10 个 props，真正改变渲染结果的只有 title / description / closable，关闭交互经 onClose 回传；没有 v-model，隐藏与否由父组件用 useState 自己维护。",
|
||
"table": [
|
||
{
|
||
"name": "children",
|
||
"type": "属性",
|
||
"desc": "子节点 prop；本实现解构了但 JSX 没有渲染它（frameworks/Alert.jsx:4,8）"
|
||
},
|
||
{
|
||
"name": "closable",
|
||
"type": "属性",
|
||
"desc": "为真才渲染右上角 × 按钮，三元分支见渲染（frameworks/Alert.jsx:8）"
|
||
},
|
||
{
|
||
"name": "description",
|
||
"type": "属性",
|
||
"desc": "副文本，渲染进 .kole-alert-desc 的 span（frameworks/Alert.jsx:8）"
|
||
},
|
||
{
|
||
"name": "onChange",
|
||
"type": "属性",
|
||
"desc": "解构声明，JSX 未绑定，传了不触发（frameworks/Alert.jsx:4）"
|
||
},
|
||
{
|
||
"name": "onClick",
|
||
"type": "属性",
|
||
"desc": "解构声明，JSX 未绑定；关闭实际走 onClose（frameworks/Alert.jsx:4,8）"
|
||
},
|
||
{
|
||
"name": "onClose",
|
||
"type": "属性",
|
||
"desc": "关闭按钮的点击处理：点 × 时回调（frameworks/Alert.jsx:8）"
|
||
},
|
||
{
|
||
"name": "onLoadMore",
|
||
"type": "属性",
|
||
"desc": "解构声明，JSX 未绑定（frameworks/Alert.jsx:4）"
|
||
},
|
||
{
|
||
"name": "onSubmit",
|
||
"type": "属性",
|
||
"desc": "解构声明，JSX 未绑定（frameworks/Alert.jsx:4）"
|
||
},
|
||
{
|
||
"name": "onChange",
|
||
"type": "事件",
|
||
"desc": "React 用 onXxx prop 接收事件；此行的 onChange 只在解构里，没有事件绑定（frameworks/Alert.jsx:4）"
|
||
},
|
||
{
|
||
"name": "onClick",
|
||
"type": "事件",
|
||
"desc": "onClick 在 JSX 里唯一出现的位置是关闭按钮，且绑的是 onClose（frameworks/Alert.jsx:8）"
|
||
},
|
||
{
|
||
"name": "onClose",
|
||
"type": "事件",
|
||
"desc": "onClose 是本实现唯一真正绑定的回调名（frameworks/Alert.jsx:8）"
|
||
},
|
||
{
|
||
"name": "children",
|
||
"type": "插槽",
|
||
"desc": "React 没有插槽语法，children 即默认子节点；本实现未渲染它（frameworks/Alert.jsx:4,8）"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Alert.jsx",
|
||
"kind": "React",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
},
|
||
{
|
||
"file": "frameworks/Alert.css",
|
||
"kind": "样式",
|
||
"desc": "该组件的样式文件，类名口径以它为准。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"alert-ex-1",
|
||
"alert-ex-2"
|
||
],
|
||
"notes": [
|
||
"props 解构清单见 frameworks/Alert.jsx:4，共 10 个；渲染主体见第 8 行（12 行文件，无内部状态）。",
|
||
"实际被渲染消费的只有 title / description / closable / onClose，其余 6 个（type、children、onChange、onClick、onSubmit、onLoadMore）只是解构声明，依据同为 frameworks/Alert.jsx:4 与 8。",
|
||
"a11y 依据：role=\"alert\" 与关闭按钮的 type/aria-label 都在 frameworks/Alert.jsx:8。",
|
||
"实现缺口：type 未参与类名拼接、children 未渲染（frameworks/Alert.jsx:8）；按实现写，未按契约补这两项能力。",
|
||
"apiCarrier.table 保留了自动生成时的「属性 + 事件 + 插槽」三套同名行（onChange / onClick / onClose / children 各出现两次），本次只改写了 desc 文案，未调整行结构。"
|
||
]
|
||
}
|