Ant Design Result 组件的复杂错误反馈实战从 Error 示例到源码级解析【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/ant/ant-design复杂错误反馈Complex Error Feedback是 antd 的 Result 组件结果页最重要的落地场景之一当表单提交失败、支付失败、账号被冻结等需要向用户展示“操作未成功 原因明细 后续操作入口”时使用statuserror的 Result 可以在一屏之内完成错误说明、原因列表和操作按钮的组织。本文以仓库中 components/result/demo/error.md 与配套的 error.tsx 为核心结合 Result 入口源码、样式实现 与单元测试完整讲解 error 状态结果页的写法、每个 API 的含义与默认值、图标与配色原理以及如何扩展成可复用的错误反馈组件。一、示例解读一次典型的提交失败反馈页原文档对示例的描述极为凝练——zh-CN 为复杂的错误反馈en-US 为Complex error feedback。真正承载内容的是对应的 error.tsx 演示代码。将其完整还原如下可直接复制运行import React from react; import { CloseCircleOutlined } from ant-design/icons; import { Button, Result, Typography } from antd; const { Paragraph, Text } Typography; const App: React.FC () ( Result statuserror titleSubmission Failed subTitlePlease check and modify the following information before resubmitting. extra{[ Button typeprimary keyconsole Go Console /Button, Button keybuyBuy Again/Button, ]} div classNamedesc Paragraph Text strong style{{ fontSize: 16, }} The content you submitted has the following error: /Text /Paragraph Paragraph CloseCircleOutlined classNamesite-result-demo-error-icon / Your account has been frozen. aThaw immediately gt;/a /Paragraph Paragraph CloseCircleOutlined classNamesite-result-demo-error-icon / Your account is not yet eligible to apply. aApply Unlock gt;/a /Paragraph /div /Result ); export default App;这段代码展示了 error 状态结果页的完整骨架包含四个核心层次状态声明statuserror决定内置图标与红色主题色主副标题title一句话说明发生了什么subTitle给出引导性说明操作区extra放置主要操作主按钮Go Console与次要操作次按钮Buy Again细节区域通过children渲染错误明细列表配合 Typography 的Paragraph/Text与错误图标逐条列出问题并给出可点击的补救链接Thaw immediately、Apply Unlock。其中extra传入的是由两个Button组成的数组React 会在渲染时自动以 key 作为标识示例中keyconsole、keybuy最终被渲染进ant-result-extra容器。children区域则被渲染进ant-result-content样式上带有浅色背景块用于承载多行错误明细。二、error 状态背后的源码机制IconMap 与状态驱动status是 Result 组件唯一控制图标与主题色的属性。打开 index.tsx 可以看到内置的映射表export const IconMap { success: CheckCircleFilled, error: CloseCircleFilled, info: ExclamationCircleFilled, warning: WarningFilled, }; export const ExceptionMap { 404: noFound, 500: serverError, 403: unauthorized, };error对应的内置图标是CloseCircleFilled红色实心圆叉这正是 error.tsx 中错误明细行所使用的CloseCircleOutlined的实心变体success、info、warning分别对应对勾、感叹号、警示三角404/500/403三个异常码走ExceptionMap渲染的是内置插画 SVG见 noFound.tsx、serverError.tsx、unauthorized.tsx而不是图标。Icon内部组件index.tsx先判断ExceptionStatus.includes(${status})若属于异常码则渲染ant-result-image插画容器否则用React.createElement从IconMap取出对应图标渲染到ant-result-icon容器。测试 index.test.tsx 验证了不同 status 会生成不同 CSS 类ant-result-warning、ant-result-error、ant-result-500这与根节点classNames(prefixCls,${prefixCls}-${status}, ...)的拼接逻辑完全对应。状态对应的主题色由 style/index.ts 中的genStatusIconStyle定义[${componentCls}-error ${componentCls}-icon ${iconCls}]: { color: token.resultErrorIconColor, },而resultErrorIconColor取自token.colorError其余状态分别对应colorInfo、colorSuccess、colorWarningstyle/index.ts。也就是说error 状态图标的红色并非写死的色值而是跟随主题 Token 中的错误色联动在暗色主题或自定义主题下会自动适配。三、API 详解error 反馈页常用参数与默认值Result 组件的完整 API 见 index.zh-CN.md 与 index.en-US.mderror 场景最常用的参数如下参数说明类型默认值error 场景用法status结果状态决定图标与颜色success|error|info|warning|404|403|500info置为error即得到红色错误图标title主标题文字ReactNode-如 Submission FailedsubTitle副标题文字ReactNode-如 Please check and modify the following information before resubmitting.extra操作区ReactNode-传入 Button或 Button 数组icon自定义图标ReactNode-覆盖内置图标传false/null可隐藏图标children额外内容区ReactNode-渲染错误明细列表类型定义可在 index.tsx 中查到status的实际类型是ResultStatusType ExceptionStatusType | keyof typeof IconMap即403 | 404 | 500 | 403 | 404 | 500 | success | error | info | warning。几个容易被忽略的细节status 默认是info不传status时渲染蓝色感叹号图标index.tsx 中status info的默认参数体现了这一点icon 传字符串会告警v4 起icon必须是 ReactNode。源码 index.tsx 在非生产环境会对长度大于 2 的字符串 icon 输出breaking级别警告测试 index.test.tsx 验证了iconsmile会触发该警告因此 error 明细中的小图标应直接使用CloseCircleOutlined等图标组件icon 传false或null可以完全隐藏图标测试 index.test.tsx 对该行为有断言extra 为空时不渲染ant-result-extra容器index.tsx 的Extra组件先判断!extra再返回 null测试 index.test.tsx 也验证了这一点。四、示例中的样式细节.site-result-demo-error-iconerror.md 文档中唯一附带的样式代码.site-result-demo-error-icon { color: red; }该 class 用在明细行的小图标上。需要说明的是demo 中把错误明细图标设置为纯红色与 Result 顶部大图标的主题色colorError并不完全一致——这是演示代码有意为之用于突出明细行。在实际业务中更推荐让明细图标也使用主题 Token例如直接依赖 antd 的colorError或使用CloseCircleOutlined配合style{{ color: var(--ant-color-error) }}这样能保证在暗色主题与品牌换肤时颜色始终正确。示例中Paragraph/Text组合出自 antd 的 Typography 组件用于组织多行错误描述Text strong加粗段落引导语a作为立即解冻申请解锁等补救动作的入口。五、从示例到实战扩展一个可复用的错误反馈页官方示例是演示性质的静态结构实战中可以将它模板化。结合 index.tsx 的行为extra支持 ReactNode 数组、children渲染进ant-result-content浅色背景块可以抽取出如下更通用的写法import React from react; import { CloseCircleOutlined } from ant-design/icons; import { Button, Result, Typography } from antd; const { Paragraph, Text } Typography; interface ErrorDetail { message: string; action?: React.ReactNode; } interface SubmissionErrorProps { title: string; subTitle?: string; details: ErrorDetail[]; extra?: React.ReactNode; } const SubmissionError: React.FCSubmissionErrorProps ({ title, subTitle, details, extra, }) ( Result statuserror title{title} subTitle{subTitle} extra{extra} Paragraph Text strong style{{ fontSize: 16 }} The content you submitted has the following error: /Text /Paragraph {details.map((item, index) ( Paragraph key{index} CloseCircleOutlined style{{ color: var(--ant-color-error) }} / {item.message}{ } {item.action} /Paragraph ))} /Result ); // 使用示例 SubmissionError titleSubmission Failed subTitlePlease check and modify the following information before resubmitting. details{[ { message: Your account has been frozen., action: aThaw immediately gt;/a, }, { message: Your account is not yet eligible to apply., action: aApply Unlock gt;/a, }, ]} extra{[ Button typeprimary keyconsole Go Console /Button, Button keybuyBuy Again/Button, ]} /;与官方示例相比这一版本把错误明细与补救动作抽象成数据驱动并让明细图标跟随主题 Token 而不是写死的red更贴合真实业务中后端返回多条校验错误后逐条展示的场景。extra中主操作使用typeprimary、次要操作使用普通按钮的层级关系与示例保持一致。六、与其他状态及异常码页的对照error 只是 Result 的七种内置状态之一。仓库 demo 目录下同时提供了其余演示便于横向对照success.tsx操作成功的绿色对勾页info.tsx、warning.tsx信息提示与警告页403.tsx、404.tsx、500.tsx无权限、页面不存在、服务器错误三个异常码插画页结构上都是status title subTitle extraBack Home 返回按钮与 error 页共用同一套布局逻辑只是图标被替换为内置 SVG 插画customIcon.tsx通过icon{SmileOutlined /}完全替换默认图标的自定义 icon 用法。选择建议表单/支付等业务校验失败用error 明细列表HTTP 错误码用403/404/500插画纯提示用info/warning。error 页由于要承载多条错误原因是唯一需要充分利用children内容区的常规状态页。七、设计 Token 与样式定制Result 的视觉细节全部通过 Design Token 控制组件级 Token 定义在 style/index.tsToken说明默认值来自prepareComponentTokentitleFontSize标题字号token.fontSizeHeading3subtitleFontSize副标题字号token.fontSizeiconFontSize图标大小token.fontSizeHeading3 * 3即标题三号字的三倍extraMargin操作区外间距${token.paddingLG}px 0 0 0同时内部还维护了resultErrorIconColorcolorError、resultInfoIconColorcolorInfo、resultSuccessIconColorcolorSuccess、resultWarningIconColorcolorWarning四组状态色以及imageWidth: 250、imageHeight: 295的插画尺寸style/index.ts。因此定制 error 结果页只需通过 ConfigProvider 的theme.components.Result覆盖上述 Token例如调大titleFontSize、修改extraMargin即可在不写任何 CSS 的情况下完成换肤。error 明细区ant-result-content的浅灰背景来自token.colorFillAlter内边距为paddingLG与padding * 2.5的组合style/index.ts。八、测试保障示例与状态的回归验证仓库通过两层测试保证 error 页及相关行为长期稳定示例级测试demo.test.ts 使用demoTest(result)对 demo 目录下全部示例含 error.tsx做快照与渲染冒烟测试防止示例因 API 变更被破坏组件级测试index.test.tsx 覆盖了不同 status 生成不同 class、icon字符串告警、icon{false/null}隐藏图标、extra为空不渲染操作区等关键行为。此外 type.test.tsx 与 image.test.tsx 分别守护了类型正确性与异常码插画渲染。如果要在业务项目中复刻这套保障最轻量的做法是把提交失败 明细 操作区的渲染断言为一个ant-result-error根节点下包含若干ant-result-extra、ant-result-content结构。结语antd Result 的 error 状态是复杂错误反馈的标准答案statuserror触发红色CloseCircleFilled图标与主题联动配色title/subTitle负责传达结论与引导extra承载操作入口children承载逐条错误明细配合 Typography 与图标即可拼装出信息完整、层级清晰的失败页。理解 error.tsx 示例的同时把握 index.tsx 中的 IconMap/ExceptionMap 状态机与 style/index.ts 的 Token 体系就能在真实业务中灵活定制并保持主题一致。【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/ant/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Ant Design Result 组件的复杂错误反馈实战：从 Error 示例到源码级解析
Ant Design Result 组件的复杂错误反馈实战从 Error 示例到源码级解析【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/ant/ant-design复杂错误反馈Complex Error Feedback是 antd 的 Result 组件结果页最重要的落地场景之一当表单提交失败、支付失败、账号被冻结等需要向用户展示“操作未成功 原因明细 后续操作入口”时使用statuserror的 Result 可以在一屏之内完成错误说明、原因列表和操作按钮的组织。本文以仓库中 components/result/demo/error.md 与配套的 error.tsx 为核心结合 Result 入口源码、样式实现 与单元测试完整讲解 error 状态结果页的写法、每个 API 的含义与默认值、图标与配色原理以及如何扩展成可复用的错误反馈组件。一、示例解读一次典型的提交失败反馈页原文档对示例的描述极为凝练——zh-CN 为复杂的错误反馈en-US 为Complex error feedback。真正承载内容的是对应的 error.tsx 演示代码。将其完整还原如下可直接复制运行import React from react; import { CloseCircleOutlined } from ant-design/icons; import { Button, Result, Typography } from antd; const { Paragraph, Text } Typography; const App: React.FC () ( Result statuserror titleSubmission Failed subTitlePlease check and modify the following information before resubmitting. extra{[ Button typeprimary keyconsole Go Console /Button, Button keybuyBuy Again/Button, ]} div classNamedesc Paragraph Text strong style{{ fontSize: 16, }} The content you submitted has the following error: /Text /Paragraph Paragraph CloseCircleOutlined classNamesite-result-demo-error-icon / Your account has been frozen. aThaw immediately gt;/a /Paragraph Paragraph CloseCircleOutlined classNamesite-result-demo-error-icon / Your account is not yet eligible to apply. aApply Unlock gt;/a /Paragraph /div /Result ); export default App;这段代码展示了 error 状态结果页的完整骨架包含四个核心层次状态声明statuserror决定内置图标与红色主题色主副标题title一句话说明发生了什么subTitle给出引导性说明操作区extra放置主要操作主按钮Go Console与次要操作次按钮Buy Again细节区域通过children渲染错误明细列表配合 Typography 的Paragraph/Text与错误图标逐条列出问题并给出可点击的补救链接Thaw immediately、Apply Unlock。其中extra传入的是由两个Button组成的数组React 会在渲染时自动以 key 作为标识示例中keyconsole、keybuy最终被渲染进ant-result-extra容器。children区域则被渲染进ant-result-content样式上带有浅色背景块用于承载多行错误明细。二、error 状态背后的源码机制IconMap 与状态驱动status是 Result 组件唯一控制图标与主题色的属性。打开 index.tsx 可以看到内置的映射表export const IconMap { success: CheckCircleFilled, error: CloseCircleFilled, info: ExclamationCircleFilled, warning: WarningFilled, }; export const ExceptionMap { 404: noFound, 500: serverError, 403: unauthorized, };error对应的内置图标是CloseCircleFilled红色实心圆叉这正是 error.tsx 中错误明细行所使用的CloseCircleOutlined的实心变体success、info、warning分别对应对勾、感叹号、警示三角404/500/403三个异常码走ExceptionMap渲染的是内置插画 SVG见 noFound.tsx、serverError.tsx、unauthorized.tsx而不是图标。Icon内部组件index.tsx先判断ExceptionStatus.includes(${status})若属于异常码则渲染ant-result-image插画容器否则用React.createElement从IconMap取出对应图标渲染到ant-result-icon容器。测试 index.test.tsx 验证了不同 status 会生成不同 CSS 类ant-result-warning、ant-result-error、ant-result-500这与根节点classNames(prefixCls,${prefixCls}-${status}, ...)的拼接逻辑完全对应。状态对应的主题色由 style/index.ts 中的genStatusIconStyle定义[${componentCls}-error ${componentCls}-icon ${iconCls}]: { color: token.resultErrorIconColor, },而resultErrorIconColor取自token.colorError其余状态分别对应colorInfo、colorSuccess、colorWarningstyle/index.ts。也就是说error 状态图标的红色并非写死的色值而是跟随主题 Token 中的错误色联动在暗色主题或自定义主题下会自动适配。三、API 详解error 反馈页常用参数与默认值Result 组件的完整 API 见 index.zh-CN.md 与 index.en-US.mderror 场景最常用的参数如下参数说明类型默认值error 场景用法status结果状态决定图标与颜色success|error|info|warning|404|403|500info置为error即得到红色错误图标title主标题文字ReactNode-如 Submission FailedsubTitle副标题文字ReactNode-如 Please check and modify the following information before resubmitting.extra操作区ReactNode-传入 Button或 Button 数组icon自定义图标ReactNode-覆盖内置图标传false/null可隐藏图标children额外内容区ReactNode-渲染错误明细列表类型定义可在 index.tsx 中查到status的实际类型是ResultStatusType ExceptionStatusType | keyof typeof IconMap即403 | 404 | 500 | 403 | 404 | 500 | success | error | info | warning。几个容易被忽略的细节status 默认是info不传status时渲染蓝色感叹号图标index.tsx 中status info的默认参数体现了这一点icon 传字符串会告警v4 起icon必须是 ReactNode。源码 index.tsx 在非生产环境会对长度大于 2 的字符串 icon 输出breaking级别警告测试 index.test.tsx 验证了iconsmile会触发该警告因此 error 明细中的小图标应直接使用CloseCircleOutlined等图标组件icon 传false或null可以完全隐藏图标测试 index.test.tsx 对该行为有断言extra 为空时不渲染ant-result-extra容器index.tsx 的Extra组件先判断!extra再返回 null测试 index.test.tsx 也验证了这一点。四、示例中的样式细节.site-result-demo-error-iconerror.md 文档中唯一附带的样式代码.site-result-demo-error-icon { color: red; }该 class 用在明细行的小图标上。需要说明的是demo 中把错误明细图标设置为纯红色与 Result 顶部大图标的主题色colorError并不完全一致——这是演示代码有意为之用于突出明细行。在实际业务中更推荐让明细图标也使用主题 Token例如直接依赖 antd 的colorError或使用CloseCircleOutlined配合style{{ color: var(--ant-color-error) }}这样能保证在暗色主题与品牌换肤时颜色始终正确。示例中Paragraph/Text组合出自 antd 的 Typography 组件用于组织多行错误描述Text strong加粗段落引导语a作为立即解冻申请解锁等补救动作的入口。五、从示例到实战扩展一个可复用的错误反馈页官方示例是演示性质的静态结构实战中可以将它模板化。结合 index.tsx 的行为extra支持 ReactNode 数组、children渲染进ant-result-content浅色背景块可以抽取出如下更通用的写法import React from react; import { CloseCircleOutlined } from ant-design/icons; import { Button, Result, Typography } from antd; const { Paragraph, Text } Typography; interface ErrorDetail { message: string; action?: React.ReactNode; } interface SubmissionErrorProps { title: string; subTitle?: string; details: ErrorDetail[]; extra?: React.ReactNode; } const SubmissionError: React.FCSubmissionErrorProps ({ title, subTitle, details, extra, }) ( Result statuserror title{title} subTitle{subTitle} extra{extra} Paragraph Text strong style{{ fontSize: 16 }} The content you submitted has the following error: /Text /Paragraph {details.map((item, index) ( Paragraph key{index} CloseCircleOutlined style{{ color: var(--ant-color-error) }} / {item.message}{ } {item.action} /Paragraph ))} /Result ); // 使用示例 SubmissionError titleSubmission Failed subTitlePlease check and modify the following information before resubmitting. details{[ { message: Your account has been frozen., action: aThaw immediately gt;/a, }, { message: Your account is not yet eligible to apply., action: aApply Unlock gt;/a, }, ]} extra{[ Button typeprimary keyconsole Go Console /Button, Button keybuyBuy Again/Button, ]} /;与官方示例相比这一版本把错误明细与补救动作抽象成数据驱动并让明细图标跟随主题 Token 而不是写死的red更贴合真实业务中后端返回多条校验错误后逐条展示的场景。extra中主操作使用typeprimary、次要操作使用普通按钮的层级关系与示例保持一致。六、与其他状态及异常码页的对照error 只是 Result 的七种内置状态之一。仓库 demo 目录下同时提供了其余演示便于横向对照success.tsx操作成功的绿色对勾页info.tsx、warning.tsx信息提示与警告页403.tsx、404.tsx、500.tsx无权限、页面不存在、服务器错误三个异常码插画页结构上都是status title subTitle extraBack Home 返回按钮与 error 页共用同一套布局逻辑只是图标被替换为内置 SVG 插画customIcon.tsx通过icon{SmileOutlined /}完全替换默认图标的自定义 icon 用法。选择建议表单/支付等业务校验失败用error 明细列表HTTP 错误码用403/404/500插画纯提示用info/warning。error 页由于要承载多条错误原因是唯一需要充分利用children内容区的常规状态页。七、设计 Token 与样式定制Result 的视觉细节全部通过 Design Token 控制组件级 Token 定义在 style/index.tsToken说明默认值来自prepareComponentTokentitleFontSize标题字号token.fontSizeHeading3subtitleFontSize副标题字号token.fontSizeiconFontSize图标大小token.fontSizeHeading3 * 3即标题三号字的三倍extraMargin操作区外间距${token.paddingLG}px 0 0 0同时内部还维护了resultErrorIconColorcolorError、resultInfoIconColorcolorInfo、resultSuccessIconColorcolorSuccess、resultWarningIconColorcolorWarning四组状态色以及imageWidth: 250、imageHeight: 295的插画尺寸style/index.ts。因此定制 error 结果页只需通过 ConfigProvider 的theme.components.Result覆盖上述 Token例如调大titleFontSize、修改extraMargin即可在不写任何 CSS 的情况下完成换肤。error 明细区ant-result-content的浅灰背景来自token.colorFillAlter内边距为paddingLG与padding * 2.5的组合style/index.ts。八、测试保障示例与状态的回归验证仓库通过两层测试保证 error 页及相关行为长期稳定示例级测试demo.test.ts 使用demoTest(result)对 demo 目录下全部示例含 error.tsx做快照与渲染冒烟测试防止示例因 API 变更被破坏组件级测试index.test.tsx 覆盖了不同 status 生成不同 class、icon字符串告警、icon{false/null}隐藏图标、extra为空不渲染操作区等关键行为。此外 type.test.tsx 与 image.test.tsx 分别守护了类型正确性与异常码插画渲染。如果要在业务项目中复刻这套保障最轻量的做法是把提交失败 明细 操作区的渲染断言为一个ant-result-error根节点下包含若干ant-result-extra、ant-result-content结构。结语antd Result 的 error 状态是复杂错误反馈的标准答案statuserror触发红色CloseCircleFilled图标与主题联动配色title/subTitle负责传达结论与引导extra承载操作入口children承载逐条错误明细配合 Typography 与图标即可拼装出信息完整、层级清晰的失败页。理解 error.tsx 示例的同时把握 index.tsx 中的 IconMap/ExceptionMap 状态机与 style/index.ts 的 Token 体系就能在真实业务中灵活定制并保持主题一致。【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/ant/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
