Ant Design Result 组件完全指南状态页设计与源码级实现解析【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/ant/ant-design导读Ant Design Result 是面向「操作结果反馈」场景的企业级状态页组件当一次重要操作执行完毕后需要向用户清晰传达成功、失败或异常等结果信息且反馈内容较为复杂包含标题、副标题、操作按钮、错误详情等时Result 提供了开箱即用的解决方案。本文将围绕官方文档的 When To Use、Examples、API 与 Design Token 四个核心板块结合仓库中 index.tsx 的渲染逻辑、style/index.ts 的样式令牌实现以及全部 9 个官方示例讲解七种状态success/info/warning/error/403/404/500的选型与用法、自定义图标、内置异常插画复用以及如何通过ConfigProvider精确调整组件样式令牌帮助你在实际项目中快速落地规范统一的结果页与错误页。何时使用 Result官方文档给出的使用场景非常明确Use when important operations need to inform the user to process the results and the feedback is more complicated.翻译过来即当一次重要操作需要告知用户处理结果且反馈内容比较复杂时使用。典型场景包括支付、下单、提交表单成功后的结果页成功态登录失效、权限不足的拦截页403路由不存在、链接失效的兜底页404服务端异常、系统错误的容错页500需要展示错误明细列表、并提供「重新提交」「返回控制台」等操作入口的错误反馈。如果只是简单的轻量反馈如操作提示、全局通知则应优先考虑 Message 或 Notification 组件而不是 Result。核心概念七种状态与默认呈现Result 的全部表现力都建立在status属性之上。在 index.tsx 中状态被拆分为两个映射表IconMap —— 图标型状态对应语义图标状态图标语义successCheckCircleFilled操作成功errorCloseCircleFilled操作失败infoExclamationCircleFilled信息提示warningWarningFilled警告提醒ExceptionMap —— 异常插画型状态对应内置 SVG 插画状态插画组件源码文件403unauthorizedunauthorized.tsx404noFoundnoFound.tsx500serverErrorserverError.tsx在组件内部Icon子组件通过ExceptionStatus.includes(\${status})判断当前状态属于哪一类若为异常插画型则渲染ExceptionMap中对应的 SVG 插画外层包裹.result-image容器否则从IconMap中取出语义图标渲染外层包裹.result-icon容器。插画容器在 [style/index.ts](https://link.gitcode.com/i/f1c33b76a9882fffb8648713fa37c512) 中固定为imageWidth: 250、imageHeight: 295配合margin: auto 居中显示。需要特别注意的是status的默认值是info源码status info因此即使完全不传status组件也会渲染一个信息图标。同时异常状态支持字符串与数字两种写法类型定义ExceptionStatusType 403 | 404 | 500 | 403 | 404 | 500测试用例 type.test.tsx 中同时覆盖了Result status404与Result status{404}两种写法。API 属性详解官方文档的 API 表格如下结合 ResultProps 接口可以还原出完整属性集属性说明类型默认值extra操作区一般放置按钮ReactNode-icon自定义图标自定义返回图标ReactNode-status结果状态决定图标与颜色success|error|info|warning|404|403|500infosubTitlesubTitle 副标题ReactNode-titletitle 标题ReactNode-children结果内容区用于展示错误明细等复杂信息ReactNode-className / rootClassName自定义类名string-style自定义样式CSSProperties-prefixCls样式类名前缀string-官方文档中「Common props」参考了 docs/react/common-props即className、style、prefixCls等通用属性说明。以下几个关键行为值得展开icon 优先级自定义icon优先于状态默认图标渲染但传入icon{null}或icon{false}时会直接不渲染图标区域源码中if (icon null || icon false) return null;icon 类型校验开发环境下若icon传入长度大于 2 的字符串会通过devUseWarning(Result)发出 breaking 级警告提示 v4 起icon应使用 ReactNode 而非字符串名称参见 index.tsxchildren 内容区children 会渲染到.result-content容器中样式带有colorFillAlter背景色与内边距适合放置错误明细、步骤说明等结构化内容。实战示例七种状态页的完整写法以下代码均取自官方 Demo 目录components/result/demo可直接复制使用。成功页Successimport React from react; import { Button, Result } from antd; const App: React.FC () ( Result statussuccess titleSuccessfully Purchased Cloud Server ECS! subTitleOrder number: 2017182818828182881 Cloud server configuration takes 1-5 minutes, please wait. extra{[ Button typeprimary keyconsoleGo Console/Button, Button keybuyBuy Again/Button, ]} / ); export default App;要点extra接收 ReactNode 数组时多个操作按钮会横向排列.result-extra中相邻元素自动加marginInlineEnd间距主操作使用typeprimary突出次操作使用默认样式。信息页Info与警告页Warning信息页不传status即为默认的info状态import React from react; import { Button, Result } from antd; const App: React.FC () ( Result titleYour operation has been executed extra{Button typeprimary keyconsoleGo Console/Button} / ); export default App;警告页仅需将状态切换为warningResult statuswarning titleThere are some problems with your operation. extra{Button typeprimary keyconsoleGo Console/Button} /错误页Error 错误明细错误态与children内容区配合可展示详细的错误条目列表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 keyconsoleGo 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 / Your account has been frozen. aThaw immediately gt;/a /Paragraph Paragraph CloseCircleOutlined / Your account is not yet eligible to apply. aApply Unlock gt;/a /Paragraph /div /Result ); export default App;HTTP 异常页403 / 404 / 500三个异常状态共享同一套写法区别仅在status与文案// 403无权限 Result status403 title403 subTitleSorry, you are not authorized to access this page. extra{Button typeprimaryBack Home/Button} / // 404页面不存在 Result status404 title404 subTitleSorry, the page you visited does not exist. extra{Button typeprimaryBack Home/Button} / // 500服务器错误 Result status500 title500 subTitleSorry, something went wrong. extra{Button typeprimaryBack Home/Button} /这三个状态渲染的是仓库内置的精美 SVG 插画非字体图标可直接作为路由 404 页面、权限校验失败页和全局异常兜底页使用。自定义图标icon 属性的应用如果内置的状态图标或异常插画不满足品牌需求可以通过icon传入任意 ReactNode 完全替换默认图标import React from react; import { SmileOutlined } from ant-design/icons; import { Button, Result } from antd; const App: React.FC () ( Result icon{SmileOutlined /} titleGreat, we have done all the operations! extra{Button typeprimaryNext/Button} / ); export default App;注意该示例未传status此时状态默认是info但渲染层以icon为准。从 Icon 子组件 的实现可以确认渲染优先级为异常状态 SVG 插画 自定义 icon 状态默认图标icon为null/false时图标区域整体不渲染。复用内置插画PRESENTED_IMAGE 静态属性Result 组件将三张异常插画以静态属性的方式直接暴露便于你在脱离 Result 组件外壳的场景如自定义弹窗、Empty 状态、Loading 占位中单独复用import { Result } from antd; // 在任意位置直接渲染 404 插画 const App () ( div style{{ width: 252, margin: auto }} Result.PRESENTED_IMAGE_404 / /div );源码中的挂载逻辑如下index.tsxResult.PRESENTED_IMAGE_403 ExceptionMap[403]; Result.PRESENTED_IMAGE_404 ExceptionMap[404]; Result.PRESENTED_IMAGE_500 ExceptionMap[500];插画均为独立的 SVG React 组件分别位于 unauthorized.tsx、noFound.tsx 与 serverError.tsx视觉尺寸约 252×294。样式定制Design Token 与主题配置官方文档末尾提供了ComponentTokenTable componentResult /对应组件级 Design Token 定义在 style/index.ts 中共四个可配置项Token说明默认值来源titleFontSize标题字体大小token.fontSizeHeading3即 24px 级subtitleFontSize副标题字体大小token.fontSize基础 14pxiconFontSize图标大小token.fontSizeHeading3 * 372pxextraMargin额外区域外间距${token.paddingLG}px 0 0 024px 上边距此外还有一组仅在组件内部使用的派生 tokenresultInfoIconColorcolorInfo、resultSuccessIconColorcolorSuccess、resultWarningIconColorcolorWarning、resultErrorIconColorcolorError它们决定了各状态下图标颜色并通过genStatusIconStyle分别写入.result-success-icon、.result-error-icon等选择器style/index.ts。通过ConfigProvider即可在应用级或局部覆盖这些 token官方 Demo component-token.tsximport React from react; import { Button, ConfigProvider, Result } from antd; const App: React.FC () ( ConfigProvider theme{{ components: { Result: { titleFontSize: 18, subtitleFontSize: 14, iconFontSize: 48, extraMargin: 12px 0 0 0, }, }, }} Result statussuccess titleSuccessfully Purchased Cloud Server ECS! subTitleOrder number: 2017182818828182881 Cloud server configuration takes 1-5 minutes, please wait. extra{[ Button typeprimary keyconsoleGo Console/Button, Button keybuyBuy Again/Button, ]} / /ConfigProvider ); export default App;如果希望进一步调整异常插画区域的尺寸从源码看该尺寸由内部 tokenimageWidth250与imageHeight295控制暂未开放为组件级 token需通过自定义 CSS 覆盖.result-image实现。整个样式体系经由genStyleHooks生成支持 cssinjs 的 hashId 隔离与 CSS 变量模式与主题系统无缝衔接。源码级行为补充前缀类名与 RTLprefixCls 注入组件通过ConfigContext的getPrefixCls(result, customizePrefixCls)生成类名前缀因此可用ConfigProvider prefixCls全局或局部调整前缀用于多主题/多品牌场景RTL 支持当ConfigProvider directionrtl时组件根节点会追加result-rtl类并设置direction: rtl同时.result-extra内部使用marginInlineEnd而非marginRight做间距天然适配 RTL 布局style/index.ts渲染顺序根节点内依次渲染 图标Icon→ 标题title→ 副标题subTitle→ 操作区extra→ 内容区children其中 subTitle、extra、children 为空时对应 DOM 均不输出避免多余节点。上述渲染顺序、默认状态、警告行为等均已由测试用例覆盖见 components/result/tests/index.test.tsx覆盖success/warning/error/500/404各状态渲染与类名合并与 type.test.tsx覆盖状态类型与异常状态数字写法。小结Result 组件以status为唯一核心驱动向下分流为语义图标success/error/info/warning与内置 SVG 插画403/404/500两条渲染路径配合title/subTitle/extra/children四块内容区域即可拼装出完整的状态页。在工程实践中建议将 404/403/500 页面直接以 Result 为基础封装为全局路由兜底组件将成功/失败反馈封装为可复用的结果页模板并通过ConfigProvider统一收敛样式 token从而在整站范围内保持结果反馈的视觉与交互一致性。【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/ant/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考