Sonner项目中Toast组件的悬停关闭机制解析

问题现象分析

在Sonner项目的Toast通知组件使用过程中，开发者发现当同时显示多个Toast通知时，如果用户将鼠标悬停在这些Toast上，然后在移出鼠标时，所有Toast会同时关闭，而不是按照预期的顺序逐个关闭。

技术原理探究

这个现象实际上与Toast组件的expand属性配置密切相关。在Sonner项目中，Toast组件提供了两种不同的显示模式：

1. 折叠模式(expand=false)：这是默认配置，所有Toast会堆叠在一起显示。在这种模式下，当用户与Toast交互时，系统会将所有Toast视为一个整体来处理悬停和关闭事件。

2. 展开模式(expand=true)：在这种配置下，每个Toast都会完全展开显示，保持各自的独立状态。此时每个Toast会有自己独立的悬停和关闭计时器。

解决方案建议

要解决多个Toast同时关闭的问题，开发者可以采用以下两种方案：

1. 启用展开模式：通过设置expand={true}属性，使每个Toast保持独立状态。这样当用户悬停和移出时，每个Toast会独立处理自己的关闭逻辑。

2. 自定义关闭延迟：如果必须使用折叠模式，可以通过自定义每个Toast的关闭延迟时间，使它们不会同时触发关闭动画。

最佳实践

在实际项目开发中，建议根据具体场景选择合适的Toast显示模式：

• 对于需要强调每个通知独立性的场景，使用展开模式
• 对于需要节省屏幕空间、显示大量简短通知的场景，可以使用折叠模式
• 可以考虑根据通知数量动态切换模式，少量通知时展开，数量多时折叠

实现示例

// 展开模式示例 - 每个Toast独立关闭
<Toaster expand={true} />

// 或者为每个Toast设置不同的自动关闭延迟
toast('消息1', { duration: 3000 })
toast('消息2', { duration: 3500 })
toast('消息3', { duration: 4000 })

通过理解Sonner项目中Toast组件的这两种显示模式及其交互机制，开发者可以更好地控制通知的显示行为，提升用户体验。