如何从非React上下文触发PrimeReact Toast组件（HTTP失败场景）

方法一：全局Toast服务模块 #

这是最简洁直接的方案，通过单独模块维护Toast实例引用，让非React代码能直接调用Toast展示方法。

1. 创建toastService.js模块：

// toastService.js
let toastInstance = null;

// 保存Toast组件的ref
export const setToastInstance = (ref) => {
  toastInstance = ref;
};

// 封装Toast的show方法
export const showToast = (options) => {
  if (toastInstance?.current) {
    toastInstance.current.show(options);
  }
};

2. 在根组件中注册Toast实例：

import { Toast } from 'primereact/toast';
import { useRef, useEffect } from 'react';
import { setToastInstance } from './toastService';

function App() {
  const toastRef = useRef(null);

  useEffect(() => {
    setToastInstance(toastRef);
  }, []);

  return (
    <div className='App'>
      <Toast ref={toastRef} />
      {/* 其他业务组件 */}
    </div>
  );
}

3. 在HTTP工具函数中调用：

import { showToast } from './toastService';

export const http = async (config) => {
  try {
    const response = await fetch(config.url, {
      ...config,
      headers: { 'Content-Type': 'application/json', ...config.headers }
    });
    
    if (!response.ok) {
      throw new Error(`HTTP错误：${response.status}`);
    }
    
    return await response.json();
  } catch (error) {
    // 调用Toast展示错误提示
    showToast({
      severity: 'error',
      summary: '请求失败',
      detail: error.message,
      life: 5000
    });
    throw error; // 抛出错误让调用方做后续处理
  }
};

方法二：React Context + 自定义Hook（适合React生态内扩展） #

如果项目依赖React Context做状态管理，可以通过Context暴露Toast展示方法，但纯工具函数无法直接访问Context，若要在http工具中调用，需要结合方法一的思路，或在React组件调用http时传入回调（后者会增加冗余代码）。

示例Context实现：

// ToastContext.js
import { createContext, useContext, useRef } from 'react';
import { Toast } from 'primereact/toast';

const ToastContext = createContext();

export const ToastProvider = ({ children }) => {
  const toastRef = useRef(null);

  const showToast = (options) => {
    toastRef.current?.show(options);
  };

  return (
    <ToastContext.Provider value={{ showToast }}>
      <Toast ref={toastRef} />
      {children}
    </ToastContext.Provider>
  );
};

export const useToast = () => useContext(ToastContext);

在根组件包裹Provider：

function App() {
  return (
    <ToastProvider>
      <div className='App'>
        {/* 其他业务组件 */}
      </div>
    </ToastProvider>
  );
}

在React组件中使用：

import { useToast } from './ToastContext';
import { http } from './http';

function SomeComponent() {
  const { showToast } = useToast();

  const fetchData = async () => {
    try {
      await http({ url: '/api/data' });
    } catch (error) {
      showToast({
        severity: 'error',
        detail: error.message
      });
    }
  };

  return <button onClick={fetchData}>获取数据</button>;
}

注意事项 #

• 确保Toast组件在根组件仅挂载一次，避免多实例导致的展示混乱。
• 在showToast中加入空值判断，防止Toast实例未初始化时调用报错。
• 可封装快捷方法（如showErrorToast、showSuccessToast），减少重复代码。

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