如何在Hooks中使用BlueprintJS的Toast？关闭及超时失效问题求助

核心问题 #

你直接把<Toast>作为<Toaster>的子元素渲染，这是错误用法。BlueprintJS的Toaster组件不通过子组件管理Toast实例，它需要通过ref调用API来添加Toast，否则Toaster无法接管Toast的关闭、超时等生命周期逻辑。

正确实现步骤 #

• 创建Toaster的ref（你已完成这一步）
• 通过ref的show()方法传入Toast配置，而非直接嵌套Toast组件

完整代码示例 #

import { Toaster, Position } from "@blueprintjs/core";
import { useRef, useEffect } from "react";

function YourComponent() {
  const toaster = useRef(null);

  // 组件挂载时显示Toast（可替换为按钮点击等事件触发）
  useEffect(() => {
    toaster.current?.show({
      message: "Votre message a bien été envoyé.",
      className: "text-lime-800",
      timeout: 3000,
      // 可选：自定义关闭回调
      onClose: () => console.log("Toast已关闭")
    });
  }, []);

  return (
    <div>
      {/* 仅渲染Toaster，不嵌套Toast */}
      <Toaster position={Position.TOP} ref={toaster} />
    </div>
  );
}

补充说明 #

• 为什么需要ref？Toaster的show、dismiss等核心方法只能通过组件实例访问，ref是获取这个实例的唯一方式，只有通过这些方法添加的Toast，才能被Toaster正确管理。
• 如果需要手动关闭Toast，可以保存show()返回的toastId，调用toaster.current.dismiss(toastId)即可。

内容的提问来源于stack exchange，提问作者Malaury Boudon