logoNamu Design

⌘ K
  • 设计
  • 研发
  • 组件
  • 博客
  • 资源
  • 国内镜像
1.0.0
  • 组件总览
  • 通用
    • Button按钮
    • FloatButton悬浮按钮New
    • Icon图标
    • Typography排版
  • 布局
    • Divider分割线
    • Grid栅格
    • Layout布局
    • Space间距
  • 导航
    • Anchor锚点
    • Breadcrumb面包屑
    • Dropdown下拉菜单
    • Menu导航菜单
    • Pagination分页
    • Steps步骤条
  • 数据录入
    • AutoComplete自动完成
    • Cascader级联选择
    • Checkbox多选框
    • ColorPicker颜色选择器New
    • DatePicker日期选择框
    • Form表单
    • Input输入框
    • InputNumber数字输入框
    • Mentions提及
    • Radio单选框
    • Rate评分
    • Select选择器
    • Slider滑动输入条
    • Switch开关
    • TimePicker时间选择框
    • Transfer穿梭框
    • TreeSelect树选择
    • Upload上传
  • 数据展示
    • Avatar头像
    • Badge徽标数
    • Calendar日历
    • Card卡片
    • Carousel走马灯
    • Collapse折叠面板
    • Descriptions描述列表
    • Empty空状态
    • Image图片
    • List列表
    • Popover气泡卡片
    • QRCode二维码New
    • Segmented分段控制器
    • Statistic统计数值
    • Table表格
    • Tabs标签页
    • Tag标签
    • Timeline时间轴
    • Tooltip文字提示
    • Tour漫游式引导New
    • Tree树形控件
  • 反馈
    • Alert警告提示
    • Drawer抽屉
    • Message全局提示
    • Modal对话框
    • Notification通知提醒框
    • Popconfirm气泡确认框
    • Progress进度条
    • Result结果
    • Skeleton骨架屏
    • Spin加载中
    • Watermark水印New
  • 其他
    • Affix固钉
    • App包裹组件New
    • ConfigProvider全局化配置
何时使用
代码演示
Hooks 调用（推荐）
其他提示类型
修改延时
加载中
Promise 接口
自定义样式
更新消息内容
静态方法（不推荐）
API
全局方法
Design Token
FAQ
为什么 message 不能获取 context、redux 的内容和 ConfigProvider 的 locale/prefixCls/theme 等配置？
静态方法如何设置 prefixCls ？

Message
全局提示

    • Drawer抽屉Modal对话框

    相关资源

    Namu Design Charts
    Namu Design Pro
    Namu Design Pro Components
    Namu Design Mobile
    Namu Design Mini
    Namu Design Landing-首页模板集
    Scaffolds-脚手架市场
    Umi-React 应用开发框架
    dumi-组件/文档研发工具
    qiankun-微前端框架
    ahooks-React Hooks 库
    Ant Motion-设计动效
    国内镜像站点 🇨🇳

    社区

    Awesome Namu Design
    Medium
    Twitter
    yuqueNamu Design 语雀专栏
    Namu Design 知乎专栏
    体验科技专栏
    seeconfSEE Conf-蚂蚁体验科技大会
    加入我们

    帮助

    GitHub
    更新日志
    常见问题
    报告 Bug
    议题
    讨论区
    StackOverflow
    SegmentFault

    Ant XTech更多产品

    yuque语雀-构建你的数字花园
    AntVAntV-数据可视化解决方案
    EggEgg-企业级 Node.js 框架
    kitchenKitchen-Sketch 工具集
    xtech蚂蚁体验科技
    主题编辑器
    Made with ❤ by
    蚂蚁集团和 Namu Design 开源社区

    全局展示操作反馈信息。

    何时使用

    • 可提供成功、警告和错误等反馈信息。
    • 顶部居中显示并自动消失，是一种不打断用户操作的轻量级提示方式。

    代码演示

    Hooks 调用（推荐）

    通过 message.useMessage 创建支持读取 context 的 contextHolder。请注意，我们推荐通过顶层注册的方式代替 message 静态方法，因为静态方法无法消费上下文，因而 ConfigProvider 的数据也不会生效。

    expand codeexpand code
    修改延时

    自定义时长 10s，默认时长为 3s。

    expand codeexpand code
    Promise 接口

    可以通过 then 接口在关闭后运行 callback 。以上用例将在每个 message 将要结束时通过 then 显示新的 message 。

    expand codeexpand code
    更新消息内容

    可以通过唯一的 key 来更新内容。

    expand codeexpand code
    其他提示类型

    包括成功、失败、警告。

    expand codeexpand code
    加载中

    进行全局 loading，异步自行移除。

    expand codeexpand code
    自定义样式

    使用 style 和 className 来定义样式。

    expand codeexpand code
    静态方法（不推荐）

    静态方法无法消费 Context，推荐优先使用 Hooks 版本。

    expand codeexpand code

    API

    通用属性参考：通用属性

    组件提供了一些静态方法，使用方式和参数如下：

    • message.success(content, [duration], onClose)
    • message.error(content, [duration], onClose)
    • message.info(content, [duration], onClose)
    • message.warning(content, [duration], onClose)
    • message.loading(content, [duration], onClose)
    参数说明类型默认值
    content提示内容ReactNode | config-
    duration自动关闭的延时，单位秒。设为 0 时不自动关闭number3
    onClose关闭时触发的回调函数function-

    组件同时提供 promise 接口。

    • message[level](content, [duration]).then(afterClose)
    • message[level](content, [duration], onClose).then(afterClose)

    其中 message[level] 是组件已经提供的静态方法。then 接口返回值是 Promise。

    也可以对象的形式传递参数：

    • message.open(config)
    • message.success(config)
    • message.error(config)
    • message.info(config)
    • message.warning(config)
    • message.loading(config)

    config 对象属性如下：

    参数说明类型默认值
    className自定义 CSS classstring-
    content提示内容ReactNode-
    duration自动关闭的延时，单位秒。设为 0 时不自动关闭number3
    icon自定义图标ReactNode-
    key当前提示的唯一标志string | number-
    style自定义内联样式CSSProperties-
    onClick点击 message 时触发的回调函数function-
    onClose关闭时触发的回调函数function-

    全局方法

    还提供了全局配置和全局销毁方法：

    • message.config(options)
    • message.destroy()

    也可通过 message.destroy(key) 来关闭一条消息。

    message.config

    当你使用 ConfigProvider 进行全局化配置时，系统会默认自动开启 RTL 模式。(4.3.0+)

    当你想单独使用，可通过如下设置开启 RTL 模式。

    message.config({
      top: 100,
      duration: 2,
      maxCount: 3,
      rtl: true,
      prefixCls: 'my-message',
    });
    参数说明类型默认值版本
    duration默认自动关闭延时，单位秒number3
    getContainer配置渲染节点的输出位置，但依旧为全屏展示() => HTMLElement() => document.body
    maxCount最大显示数, 超过限制时，最早的消息会被自动关闭number-
    prefixCls消息节点的 className 前缀stringant-message4.5.0
    rtl是否开启 RTL 模式booleanfalse
    top消息距离顶部的位置number8

    Design Token

    组件 Token

    全局 Token

    FAQ

    为什么 message 不能获取 context、redux 的内容和 ConfigProvider 的 locale/prefixCls/theme 等配置？

    直接调用 message 方法，antd 会通过 ReactDOM.render 动态创建新的 React 实体。其 context 与当前代码所在 context 并不相同，因而无法获取 context 信息。

    当你需要 context 信息（例如 ConfigProvider 配置的内容）时，可以通过 message.useMessage 方法会返回 api 实体以及 contextHolder 节点。将其插入到你需要获取 context 位置即可：

    const [api, contextHolder] = message.useMessage();
    

    return (
      <Context1.Provider value="Ant">
        {/* contextHolder 在 Context1 内，它可以获得 Context1 的 context */}
        {contextHolder}
        <Context2.Provider value="Design">
          {/* contextHolder 在 Context2 外，因而不会获得 Context2 的 context */}
        </Context2.Provider>
      </Context1.Provider>
    );

    异同：通过 hooks 创建的 contextHolder 必须插入到子元素节点中才会生效，当你不需要上下文信息时请直接调用。

    可通过 App 包裹组件 简化 useMessage 等方法需要手动植入 contextHolder 的问题。

    静态方法如何设置 prefixCls ？

    你可以通过 ConfigProvider.config 进行设置。