type
status
date
slug
summary
category
password
tags
icon
一开始看来messageApi的使用方式就感觉每次都要导入theme，然后从useMessage里面导出Api和contextHolder，还要将contextHolder放进页面里面，不仅使用麻烦，嵌套级别深了，还会在页面上留下许多痕迹……
传统使用方式
弊端很明显，每次在使用
message组件时都需要导入messageApi和contextHolder，并将contextHolder放在页面中。这样既繁琐又容易产生冗余代码。为了更优雅地使用antd的message组件，我们可以自定义一个MessageContext上下文来全局使用messageApi自定义上下文方式
我们可以在应用的顶层组件中使用
MessageProvider来提供messageApi，并使用自定义的useMsg hook 来获取 messageApi。这样，我们就可以在任何组件中使用message组件，而无需每次导入 messageApi 和 contextHolder，并将 contextHolder 放在页面中。这种方式更加优雅和方便，减少了冗余代码的使用。layout.tsx里面进行注册
知道为什么我这里没注册吗，因为我写完了才发现antd提供了App这个新的包裹组件（V5.1.0），它提供重置样式和提供消费上下文的默认环境,提供可消费 React context 的
message.xxx、Modal.xxx、notification.xxx 的静态方法，可以简化 useMessage 等方法需要手动植入 contextHolder 的问题。正确使用方式
首先要全局注册App，由于这个属于antd的范围，因此我将其包裹在了ThemeProvider里面：
然后就可以很简单的使用自定义主题和消息提示了：
参考文献
欢迎您在底部评论区留言，一起交流~
- 作者:NotionNext
- 链接:https://lsnx.top/article/nextjs-antd-use
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。