如何在React的toBeCalledByEventListener函数中集成react-toastify？

需求背景 #

需要将react-toastify集成到名为toBeCalledByEventListener的异步函数中，不清楚导入语句、提示函数以及ToastContainer组件的正确放置位置，同时提供了异步函数和触发按钮的基础代码。

1. 导入react-toastify依赖 #

将导入语句放在组件文件的最顶部，确保样式和组件能被正确加载：

import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

2. 放置ToastContainer组件 #

ToastContainer是react-toastify的核心容器组件，必须放在组件的JSX渲染树中，建议放在返回的JSX最外层（与按钮同级或更外层容器内），确保它始终存在于DOM中才能渲染提示框。

3. 在异步函数中调用提示 #

直接在异步函数的成功、错误分支中调用toast方法即可，也可以提前定义复用函数，以下是两种实现方式：

方式1：直接调用toast（更直观） #

在请求成功时显示成功提示，请求失败时显示错误提示：

async function toBeCalledByEventListener() {
    try {
        const response = await fetch('/generate_pdf', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
        });
        const responseData = await response.json();
        const pdfURL = responseData.pdf_url;
        localStorage.setItem("pdf_url", pdfURL);
        
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        
        // 请求成功提示
        toast.success('PDF生成成功！');
        // window.open(pdfURL, '_blank');
    } catch (error) {
        console.error('Error fetching data:', error);
        // 请求失败提示
        toast.error('PDF生成失败，请稍后重试');
    } 
};

方式2：定义复用提示函数 #

如果需要多处复用提示逻辑，可提前定义函数：

const showSuccessToast = () => toast.success('操作成功');
const showErrorToast = (msg) => toast.error(msg);

async function toBeCalledByEventListener() {
    try {
        // ... 原有请求逻辑
        showSuccessToast();
    } catch (error) {
        console.error('Error fetching data:', error);
        showErrorToast('PDF生成失败，请稍后重试');
    } 
};

完整实现代码 #

import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
// 导入你的Button组件、样式文件、i18n的t函数等依赖

async function toBeCalledByEventListener() {
    try {
        const response = await fetch('/generate_pdf', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
        });
        const responseData = await response.json();
        const pdfURL = responseData.pdf_url;
        localStorage.setItem("pdf_url", pdfURL);
        
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        
        toast.success('PDF生成成功！');
        // window.open(pdfURL, '_blank');
    } catch (error) {
        console.error('Error fetching data:', error);
        toast.error('PDF生成失败，请稍后重试');
    } 
};

return (
    <div>
        <Button
            variant="large"
            className={styles.lightgreenButton}
            onClick={toBeCalledByEventListener}
        >
            {t('print')}
        </Button>
        {/* ToastContainer可配置自定义参数，优化显示体验 */}
        <ToastContainer
            position="top-right"
            autoClose={3000}
            hideProgressBar={false}
            newestOnTop={false}
            closeOnClick
            rtl={false}
            pauseOnFocusLoss
            draggable
            pauseOnHover
        />
    </div>
);

内容的提问来源于stack exchange，提问作者Nahid From Japan