企业官网建设流程全解析

Ant Design Mentions 组件status状态属性实战指南：为 @提及输入框添加 error / warning 校验反馈

【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/GitHub_Trending/an/ant-design

status是 Ant Design Mentions（@提及输入框）中用于声明组件校验状态（validation status）的核心属性，本文围绕 components/mentions/demo/status.md 这一官方示例文档展开，先给出可直接运行的最小实现，再追入 components/mentions/index.tsx 与样式生成链路，讲清从属性传值、状态类名挂载到红/金色视觉样式的完整处理路径。读完本文，你将掌握 Mentions 的error/warning状态用法、与表单校验状态自动联动的机制，以及status类名的底层来源，便于在业务系统中做出带状态反馈的提及输入框。

示例文档在组件文档体系中的位置

在 Ant Design 组件仓库中，每个组件的演示示例都以「一对文件」组织：.tsx保存可运行的代码，同名.md保存该示例的中英文简介，最终被目录页通过<code src="./demo/xxx.tsx">语法渲染进组件文档。status示例正是如此：

• 源码：components/mentions/demo/status.tsx
• 简介：components/mentions/demo/status.md
• 挂载入口：在 components/mentions/index.en-US.md 的 Examples 列表中对应<code src="./demo/status.tsx">Status</code>

status.md原文对本示例的说明非常凝练：

使用status为 Mentions 添加状态。可选error或者warning。

Add status to Mentions withstatus, which could beerrororwarning.

也就是说，本示例的目标很聚焦：通过传入status属性，让 Mentions 表现出“校验失败(error)”或“警告(warning)”两种视觉状态。官方设计示例通常在表单校验失败或存在格式风险提示（例如用户需要修改输入内容但并非致命错误）时使用它们。

完整可运行的示例代码

status.tsx中同时渲染了status="error"与status="warning"两个 Mentions，并用Space vertical纵向排布，方便对照两种状态的外观差异：

import React from 'react'; import { Mentions, Space } from 'antd'; import type { GetProp, MentionProps } from 'antd'; type MentionsOptionProps = GetProp<MentionProps, 'options'>[number]; const onChange = (value: string) => { console.log('Change:', value); }; const onSelect = (option: MentionsOptionProps) => { console.log('select', option); }; const App: React.FC = () => { const options = [ { value: 'afc163', label: 'afc163' }, { value: 'zombieJ', label: 'zombieJ' }, { value: 'yesmeck', label: 'yesmeck' }, ]; return ( <Space vertical> <Mentions onChange={onChange} onSelect={onSelect} defaultValue="@afc163" status="error" options={options} /> <Mentions onChange={onChange} onSelect={onSelect} defaultValue="@afc163" status="warning" options={options} /> </Space> ); }; export default App;

代码中有几个值得注意的工程细节：

1. status是半受控外观属性：示例中defaultValue="@afc163"让输入框初始就含有@前缀触发 token 与候选文本，options提供下拉候选项。status只影响外观状态，不影响提及的选中、清除等既有交互逻辑。
2. 示例使用options数据源而非子节点<Mentions.Option>：组件在 components/mentions/index.tsx 中对以 children 方式传入的Mentions.Option会输出 deprecated 警告，官方推荐统一使用options属性，这是该示例所演示的现行推荐写法。
3. Space vertical保证两个状态样例清晰对照：避免两个输入框并排时视觉干扰；每个 Mention 仍可独立聚焦、输入、触发下拉。

直接复制上述代码到基于antd的项目中即可看到：两个输入框的边框与聚焦态分别呈现 error（红）与 warning（黄/金）主题色。

status属性的 API 定义与取值范围

依据 components/mentions/index.en-US.md 的 API 表格，Mentions 的status属性定义如下：

几点事实性说明：

• 取值集合：类型为'error' | 'warning' | 'success' | 'validating'；示例文档只演示了 error 与 warning，因为这两个取值在输入类组件上有独立的边框/聚焦配色。success与validating通常配合表单的反馈图标（hasFeedback）使用，用于展示成功勾选或加载中语义。
• 默认值与引入版本：默认不设置（-），status自 4.19.0 起可用，当前仓库为 v5+ 演进版本，4.19.0是该能力最早引入的版本号。
• 不受 ConfigProvider 全局配置覆盖：API 表格中该行未提供「Global Config」列的配置项，即status属于组件实例级属性，需在每次使用时显式声明，或依靠下方介绍的表单上下文继承。

在类型层面，components/mentions/index.tsx 中声明：

export interface MentionProps extends Omit<RcMentionsProps, 'suffix' | 'classNames' | 'styles'> { // ... status?: InputStatus; // ... }

而InputStatus并不是一个随意的联合类型——它统一定义于 Ant Design 各输入组件的共享工具模块 components/_util/statusUtils.ts：

const _InputStatuses = ['warning', 'error', '', 'success', 'validating'] as const; export type InputStatus = (typeof _InputStatuses)[number];

也就是说，Mentions、Input、Select、AutoComplete 等数据录入组件共用同一套 status 语义与状态类名体系，这是它能在表单联动中表现一致的基础。

从属性到状态类名：状态处理的源码链路

当status="error"被传入时，Mentions 内部做了什么？沿着 components/mentions/index.tsx 的主渲染函数InternalMentions可以还原完整链路：

第一步：合并来自表单的上下文状态。组件通过FormItemInputContext读取外层Form.Item注入的校验状态：

const { status: contextStatus, hasFeedback, feedbackIcon, } = React.useContext(FormItemInputContext); const mergedStatus = getMergedStatus(contextStatus, customStatus);

components/_util/statusUtils.ts 中getMergedStatus的合并规则是customStatus || contextStatus——组件上显式设置的status优先级最高，未设置时才回退到 Form.Item 的校验状态。这就是“Mentions 放进 Form.Item 后，校验失败会自动变红”的机制来源。

第二步：将状态映射为状态类名。同一模块的getStatusClassNames负责类名生成（components/_util/statusUtils.ts）：

export const getStatusClassNames = (prefixCls, status, hasFeedback) => { return clsx({ [`${prefixCls}-status-success`]: status === 'success', [`${prefixCls}-status-warning`]: status === 'warning', [`${prefixCls}-status-error`]: status === 'error', [`${prefixCls}-status-validating`]: status === 'validating', [`${prefixCls}-has-feedback`]: hasFeedback, }); };

在 Mentions 根渲染中，该函数被用于 variant 与状态相关的 className 组装（components/mentions/index.tsx）：

variant: clsx( { [`${prefixCls}-${variant}`]: enableVariantCls, }, getStatusClassNames(prefixCls, mergedStatus), ),

以默认prefixCls = ant-mentions为例，status="error"最终会产出ant-mentions-status-error，status="warning"产出ant-mentions-status-warning。

第三步：测试快照确证。仓库自带示例渲染测试会逐个渲染demo/下所有示例并与快照比对。在 components/mentions/tests/snapshots/demo.test.tsx.snap 中可以看到本示例的快照：

exports[`renders components/mentions/demo/status.tsx correctly 1`] = ` ... class="ant-mentions ant-mentions-outlined ant-mentions-status-error ant-mentions css-var-test-id ant-mentions-css-var" ... class="ant-mentions ant-mentions-outlined ant-mentions-status-warning ant-mentions css-var-test-id ant-mentions-css-var"

快照精确验证了 error / warning 两个实例分别挂载ant-mentions-status-error、ant-mentions-status-warning类名，与源码推断一致。

状态颜色的视觉来源：共享的 Input 样式体系

类名只是钩子，真正的红/金色边框与聚焦阴影来自 CSS-in-JS 样式层。Mentions 的样式入口 components/mentions/style/index.ts 中，genMentionsStyle直接复用了 Input 组件的四类 variant 样式生成器：

genOutlinedStyle(token), genFilledStyle(token), genBorderlessStyle(token), genUnderlinedStyle(token),

这些生成器位于共享的 components/input/style/variants.ts，其内部即为各状态准备好了专门选择器。例如其中定义了&${token.componentCls}-status-${options.status}形式的样式规则（error/warning 各有对应的hoverBorderColor，如colorErrorBorderHover），并在 borderless 场景下也提供&-status-error/&-status-warning的分支处理（见该文件genBorderlessStyle相关实现）。

同时，相关的状态配色由设计令牌（token）驱动——Input 组件的共享 token 中将colorErrorOutline、colorWarningOutline组合出errorActiveShadow、warningActiveShadow等聚焦光晕变量（见 components/input/style/token.ts），error 使用红色系语义色、warning 使用金色系语义色，与全局主题保持一致，并可随主题令牌整体换肤。可以理解为：status 状态色并未为 Mentions 单独写死一套颜色，而是复用 Input 的语义 token 体系，因而天然与 Form、Input、Select 等其他组件视觉一致。

表单场景与扩展属性组合

status最常见的落地场景是在表单校验中。由于 components/mentions/index.tsx 读取了FormItemInputContext，把<Mentions>放进<Form.Item>并设置校验规则后，校验失败时输入框会自动进入 error 状态，无需手写status；Form.Item同时通过hasFeedback在输入框后缀渲染反馈图标（suffix区域，见 components/mentions/style/index.ts）。仓库中的 components/mentions/demo/form.tsx 即为该用法的完整示例。

实际使用中还应注意与以下属性的组合关系：

• variant：Mentions 支持outlined（默认）/filled/borderless/underlined四种形态（见 components/mentions/index.en-US.md 中 variant 行，underlined自 5.24.0 起支持）。状态色在上述所有 variant 下均有对应样式分支，因而 error / warning 状态在各形态下都能正确呈现。
• disabled与readOnly：禁用态拥有更高优先级——variants.ts 中状态样式规则明确排除了:not(disabled)场景与单独的状态 disabled 分支，禁用输入框不会展示 error/warning 颜色，避免“无法修改却提示错误”的矛盾反馈。
• size：large/medium/small仅影响尺寸 token，不影响状态类名与配色逻辑，可以自由叠加（参考 components/mentions/demo/size.tsx）。

小结

status属性是 Mentions 与 Ant Design 数据录入组件状态体系对接的钥匙：类型上它来自共享的InputStatus联合类型（error/warning/success/validating），实现上通过getStatusClassNames挂载ant-mentions-status-*类名，配色上复用 Input variant 样式生成器与语义色令牌，且能自动继承外层Form.Item的校验上下文。掌握了这条从 status.md 出发的链路，你就可以在「错误」与「警告」两种反馈语义之间精准选择，并将 Mentions 无缝接入既有表单校验体系。想进一步了解该组件的完整 API 与其余示例，可继续查阅 components/mentions/index.en-US.md 与中文版 components/mentions/index.zh-CN.md。

【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/GitHub_Trending/an/ant-design