antd Alert 轮播公告实战：banner 模式配合 react-fast-marquee 实现顶部滚动通知栏

本篇基于 ant-design 官方示例 loop-banner 展开，讲解如何用 Alert 组件的 banner 模式搭配 react-fast-marquee（或 react-text-loop-next）实现页面顶部的消息轮播通知栏，并结合 Alert 源码 剖析 banner 模式下的默认行为与样式差异，帮助你在企业级后台中快速落地"公告滚动条"这类高频需求。

官方示例：用 Marquee 承载滚动内容

官方示例的核心思路只有一句话：把滚动逻辑交给专门的轮播库，把视觉容器交给 Alert。Alert 负责背景色、图标、内边距、圆角/直角等视觉规范，react-fast-marquee 负责内容在视口内的无限滚动。

示例代码 完整如下：

import React from 'react';
import { Alert } from 'antd';
import Marquee from 'react-fast-marquee';

const App: React.FC = () => (
  <Alert
    banner
    title={
      <Marquee pauseOnHover gradient={false}>
        I can be a React component, multiple React components, or just some text.
      </Marquee>
    }
  />
);

export default App;

示例中三个要点值得逐一理解：

• banner 属性：将 Alert 切换为"页面顶部通告"形态。它不只是语义标记，会实际改变组件的默认值与渲染样式（下一节展开）。
• title 接收 ReactNode：从源码 AlertProps 看，title?: React.ReactNode 可以传入任意可渲染内容，<Marquee> 组件自然可以嵌套其中。title 内部支持任意数量的子元素，因此示例注释里写"可以是多个 React 组件，也可以只是文本"。
• pauseOnHover / gradient：这是 react-fast-marquee 自身的属性，分别控制鼠标悬停时暂停滚动、以及是否开启两端渐隐蒙层。title 是 ReactNode 类型，外层 Alert 对这些内部属性完全不感知，这正是"职责分离"方案的灵活性所在。

该依赖已在仓库中以开发依赖形式固定版本，见 package.json 第 301 行：

"react-fast-marquee": "^1.6.5"

如果你在业务项目中落地，需要自行安装该依赖；仓库内 组件选型推荐文档 也将"文字轮播"归类为社区互补组件，推荐 react-text-loop-next 与 react-fast-marquee 两个实现，二者任选其一即可，下文分别说明。

banner 模式的默认行为：从源码看它替你做了什么

banner 不是简单地加一个 class。阅读 Alert.tsx 可以找到两处与 banner 直接相关的默认值逻辑：

1. type 默认值从 info 变为 warning

Alert.tsx#L238-L244：

const type = React.useMemo<AlertProps['type']>(() => {
  if (props.type !== undefined) {
    return props.type;
  }
  // banner mode defaults to 'warning'
  return banner ? 'warning' : 'info';
}, [props.type, banner]);

也就是说，轮播公告不指定 type 时，会呈现 warning 类型的背景色与图标；如需 error、success 等形态，显式传入即可。这与 Alert 中文 API 文档 中 "type 默认值：info，banner 模式下默认值为 warning" 的描述一致。

2. showIcon 在 banner 模式下默认显示

Alert.tsx#L268：

// banner mode defaults to Icon
const isShowIcon = banner && showIcon === undefined ? true : showIcon;

banner 通告默认带左侧图标（warning 类型为 ExclamationCircleFilled，见 IconNode）。对于轮播场景，左侧固定图标 + 右侧滚动内容是典型布局；如果希望滚动内容占满整行，传入 showIcon={false} 即可（可参考同目录 banner 示例 中 showIcon={false} 的用法）。

3. 样式层面：去边框、去圆角、去底边距

样式文件 中对 banner 形态的覆盖：

[`&${componentCls}-banner`]: {
  marginBottom: 0,
  border: '0 !important',
  borderRadius: 0,
},

顶部通告紧贴页面边缘，因此不保留普通 Alert 的边框与圆角。最终 DOM 上的 class 组合为 ant-alert、ant-alert-warning（或你指定的类型）、ant-alert-banner，由 Alert.tsx#L291-L307 的 clsx 拼装生成。

替代方案：react-text-loop-next

官方说明（loop-banner.md）给出的另一条路线是 react-text-loop-next。它更适合"多条公告逐条淡入淡出"的场景（离散消息循环），而 react-fast-marquee 适合"单条长文本连续滚动"的场景（连续跑马灯）。选型经验：

• 内容超长、一句话讲完 → react-fast-marquee 连续滚动，信息密度高；
• 多条独立公告、每条较长 → react-text-loop-next 逐条轮播，可点击打断阅读。

无论选哪个，接入方式相同：把库的组件作为 title 的值传入 Alert，Alert 的其他属性照常使用。

实战扩展：让轮播公告更可用

在官方最小示例基础上，结合 Alert 的完整能力，轮播公告通常还需要以下增强，均已被 AlertProps 原生支持：

<Alert
  banner
  closable={{ onClose: handleBannerClose }}  // 对象形式 closable，支持 onClose / afterClose
  showIcon
  type="warning"
  action={
    <a onClick={openAnnouncement}>查看详情</a>
  }
  title={
    <Marquee pauseOnHover gradient={false}>
      系统将于本周六 02:00 进行数据库升级，期间服务可能短暂不可用。
    </Marquee>
  }
/>

各增强点的源码依据：

• 可关闭：closable 支持布尔或对象两种形态，对象形态可配置 onClose（点击关闭回调）与 afterClose（关闭动画结束后回调），见 AlertProps#L55-L61。关闭动画由 CSSMotion 驱动：Alert.tsx#L336-L343 中 onLeaveStart 会先记录元素高度并设置 maxHeight，使通告收起时高度平滑过渡，而不是直接消失。
• action 操作区：action?: React.ReactNode（AlertProps#L100）渲染在内容右侧，适合放"查看详情"跳转链接。
• 精细化样式覆盖：classNames 与 styles 采用语义化插槽（root / icon / section / title / description / actions / close，定义见 AlertSemanticType）。例如要给滚动容器单独限宽或调字号，可对 title 插槽注入内联样式，而无需全局样式穿透。

适用前提与注意事项

• 依赖前提：react-fast-marquee 或 react-text-loop-next 不是 antd 的运行时依赖，需要业务工程自行安装；仓库中的版本约束为 ^1.6.5（package.json），仅用于驱动官方示例。
• 无障碍：Alert 根节点固定渲染 role="alert"（Alert.tsx#L357），滚动内容对屏幕阅读器同样可读；若公告不具紧急性，可通过 role 属性覆盖为 status 以降低打断级别。
• RTL 布局：banner 模式下方向适配已内置，direction === 'rtl' 时自动附加 ant-alert-rtl（Alert.tsx#L299），react-fast-marquee 内部基于 transform 平移，配合外层方向 class 即可工作。
• 不要与 message/notification 混淆：本方案解决的是"常驻页面顶部的公告栏"，而临时性提示仍应使用 antd 的 message 或 notification 体系；官方将文字轮播明确归入 社区互补组件 而非核心组件，选型时注意这一边界。

小结

轮播公告栏的官方解法是把"容器"与"动效"解耦：Alert 的 banner 模式提供顶部通告的规范视觉（默认 warning 类型、默认显示图标、无边框圆角），react-fast-marquee 或 react-text-loop-next 负责内容滚动。理解了 title 作为 ReactNode 的开放性与 classNames/styles 语义插槽之后，你可以在不修改 antd 源码的前提下，把公告栏扩展为可关闭、可跳转、可精细定制样式的完整功能模块。