如何结合EmailJS使用React Toastify Promise Toast并自定义加载器

修改后的完整代码 #

import emailjs from "@emailjs/browser";
import { toast } from 'react-toastify';

// 自定义加载器组件（可根据项目UI调整样式）
const CustomLoader = () => (
  <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
    <div style={{
      width: '16px',
      height: '16px',
      border: '2px solid #ccc',
      borderTopColor: '#333',
      borderRadius: '50%',
      animation: 'spin 1s linear infinite'
    }} />
    <span>提交中，请稍候...</span>
  </div>
);

// 全局添加加载动画的CSS（可以放到项目全局样式文件中）
const style = document.createElement('style');
style.textContent = `
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
`;
document.head.appendChild(style);

export const sendEmail = ({ service_id, templete_id, values, theme, setIsloading, pubkey }) => {
  toast.promise(
    // 直接传入EmailJS返回的Promise
    emailjs.send(service_id, templete_id, values, pubkey),
    {
      pending: {
        render: () => <CustomLoader />,
        icon: false, // 关闭默认图标，使用自定义加载器
        theme // 传递主题配置
      },
      success: {
        render: () => "Application submitted !",
        theme,
        onClose: () => setIsloading(false) // 弹窗关闭后更新加载状态
      },
      error: {
        render: ({ data }) => {
          console.error(data);
          return "Something went wrong.";
        },
        theme,
        onClose: () => setIsloading(false)
      }
    }
  );
};

核心改动说明 #

• 自定义加载器：创建CustomLoader组件，通过CSS实现旋转加载动画，可按需修改样式、文字内容适配项目风格
• Promise 封装：直接将emailjs.send返回的Promise传入toast.promise，无需手动编写then/catch逻辑
• 状态同步：将setIsloading(false)放在弹窗的onClose回调中，确保弹窗关闭后再更新页面加载状态
• 主题统一：在pending、success、error三种状态的配置中都传入theme，保持弹窗样式与原有逻辑一致
• 错误捕获：在error的render函数中直接获取错误对象data，用于控制台打印排查问题

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