如何在React组件外使用react-toastify并以React组件作为提示内容

核心原因 #

1. 普通.ts文件默认不支持JSX语法，直接编写<CustomComponent />这类JSX代码会触发编译错误。
2. React组件必须在React渲染上下文（即已挂载ToastContainer）中渲染，非组件文件直接调用时需确保上下文可用。

最优解决方案 #

方案1：修改文件后缀并配置JSX支持 #

• 将agent.ts重命名为agent.tsx，让TypeScript识别并处理JSX语法。
• 检查tsconfig.json中的JSX配置，匹配你的React版本：

  {
    "compilerOptions": {
      "jsx": "react-jsx" // React 17+ 推荐使用，旧版本可设置为"react"
    }
  }
  

• 直接在拦截器中传入自定义组件：

  // 自定义错误提示组件（需在.tsx文件中定义）
  const CustomApiErrorToast = ({ status, message }: { status: number; message: string }) => (
    <div style={{ padding: '12px', backgroundColor: '#ffebee', color: '#c62828', borderRadius: '4px' }}>
      <p>状态码：{status}</p>
      <p>{message}</p>
    </div>
  );
  
  // 拦截器中调用
  if (!data || !data.errors) {
    toast.error(<CustomApiErrorToast status={status} message="请检查终端获取详细信息！" />);
    return;
  }
  

方案2：封装Toast服务（不修改agent.ts后缀） #

如果不想改动agent.ts的文件后缀，可将JSX相关逻辑封装到单独的.tsx服务文件中：

1. 创建ToastService.tsx：

   import { toast } from 'react-toastify';
   import CustomApiErrorToast from './CustomApiErrorToast';
   
   // 封装自定义错误提示调用函数
   export const showApiErrorToast = (status: number, message: string) => {
     toast.error(<CustomApiErrorToast status={status} message={message} />);
   };
   
   export const showNetworkErrorToast = () => {
     toast.error('网络错误，请确认API服务是否运行！');
   };
   

2. 在agent.ts中导入并调用：

   import { showApiErrorToast, showNetworkErrorToast } from './ToastService';
   
   axios.interceptors.response.use(undefined, async (error) => {
     if (error.message === 'Network Error' && !error.response) {
       showNetworkErrorToast();
     }
   
     const { status, data } = error.response;
   
     if (status >= 400 && status <= 500) {
       if (!data || !data.errors) {
         showApiErrorToast(status, '请检查终端获取详细信息！');
         return;
       }
   
       console.warn('API Errors:', data.errors);
       Object.keys(data.errors).forEach(function (key) {
         toast.warn(data.errors[key].toString());
       });
     }
   
     if (status === 500) {
       toast.error('服务器错误，请检查终端获取更多信息！');
     }
   
     throw error.response;
   });
   

额外注意事项 #

• 确保React应用根组件中已渲染ToastContainer（react-toastify的必备容器）：

  import { ToastContainer } from 'react-toastify';
  import 'react-toastify/dist/ReactToastify.css';
  
  function App() {
    return (
      <>
        {/* 其他业务组件 */}
        <ToastContainer />
      </>
    );
  }
  

• 保持react-toastify为最新版本，避免版本兼容问题。

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