请教大佬 FluentUI Toast 不显示的问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 122 天前的主题，其中的信息可能已经有所发展或是发生改变。

官方文档

小弟不是专业做网页的，让 AI 用 React 做了个页面，本来一切都挺顺利，但是想用 Toast 组件，死活显示不出来。

我以为被什么东西挡住了，结果开一个空页面粘贴文档的代码都不显示，AI 也修不好，F12 也没有报错，但是微软的那个 sandbox 就可以，到底是哪里出问题呢？折磨一天了没弄出来。是不是有什么细节没注意到，请老哥们赐教

浏览器是 EDGE 最新版，React 是 v18 ，FluentUI 是 v9 。

FluentUI

toast

React

6 条回复 2025-08-19 21:54:49 +08:00

JoeJoeJoe

PRO

122 天前

不贴代码怎么看啊

干啥不都得有个上下文?

hertzry

122 天前 via iPhone

@JoeJoeJoe 你就试试文档的代码吧，那个俺都弄不出来。

jroger

122 天前

大概率是你没有在根节点下放一个接收 toast 的容器，只用了 toast 组件。仔细看一下文档，我用的版本和你的一样，就没有问题。

hertzry

122 天前 via iPhone

@jroger 感谢测试，我放在了 FluentProvider 里，难道是这个不对吗？

hertzry

122 天前

@jroger 就是这样显示不了。
...
dispatchToast(
<Toast>
<ToastTitle>Example data loaded</ToastTitle>
</Toast>,
{intent: "success", position: "top-end"}
);
...
return (
<FluentProvider theme={isDark ? darkTheme : lightTheme} applyStylesToPortals>
<Toaster toasterId={toasterId} />
...
假如我直接
return (
<FluentProvider theme={isDark ? darkTheme : lightTheme} applyStylesToPortals>
<Toast intent: "success", position: "top-end">
<ToastTitle>Example data loaded</ToastTitle>
</Toast>
就能显示，我理解的是 dispatchToast 没有起作用。

hertzry

121 天前 via iPhone

把 nextjs 换成 vite 就好了，不知道其中缘由。