解决 React-Toastify 升级后通知不显示问题：从版本兼容到正确集成

# 使用 npm
npm install react-toastify@9.1.2

# 或者使用 yarn
yarn add react-toastify@9.1.2

// shared/Notifications/notifications.js (或您自定义的通知管理文件)
import React from "react";
import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css"; // 确保导入样式文件

/**
 * 全局Toast通知容器组件。
 * 确保此组件在应用的根部只渲染一次。
 */
export const GlobalToastContainer = () => {
    return (
        <ToastContainer
            position="top-right" // 通知显示位置
            autoClose={3000}     // 自动关闭时间（毫秒）
            hideProgressBar={false} // 是否隐藏进度条
            newestOnTop={false}  // 新通知是否显示在顶部
            closeOnClick         // 点击通知时关闭
            rtl={false}          // 是否支持从右到左的布局
            pauseOnFocusLoss     // 窗口失去焦点时暂停计时
            draggable            // 通知可拖拽
            pauseOnHover         // 鼠标悬停时暂停计时
            theme="light"        // 主题 ('light', 'dark', 'colored')
        />
    );
};

// App.js
import React, { Fragment } from "react";
import { GlobalToastContainer } from "./shared/Notifications/notifications"; // 根据您的文件路径调整

// 假设您有其他应用组件
import AppHeader from "./AppHeader";
import AppSidebar from "./AppSidebar";
import AppFooter from "./AppFooter";

class App extends React.Component {
    render() {
        return (
            <Fragment>
                <AppHeader />
                {/* 将 GlobalToastContainer 放置在应用布局的合适位置 */}
                <GlobalToastContainer />
                <AppSidebar />
                <AppFooter />
            </Fragment>
        );
    }
}

export default App;

// shared/Notifications/notifications.js (与 GlobalToastContainer 在同一文件)
import { toast } from "react-toastify"; // 导入 toast 函数

// ... (GlobalToastContainer 的定义)

/**
 * 封装的通知方法，根据严重级别显示不同类型的Toast。
 * @param {object} params - 通知参数
 * @param {string} params.severity - 通知严重级别 ('success', 'critical', 'warning'等，对应toast.success, toast.error, toast.warn)
 * @param {string} params.message - 通知内容
 * @param {string} [params.title] - 通知标题 (React-Toastify默认不显示独立标题，通常合并到message或自定义Toast组件)
 */
export const toastnotify = (params) => {
    const commonOptions = {
        position: "top-right",
        autoClose: 3000,
        hideProgressBar: false,
        closeOnClick: true,
        pauseOnHover: true,
        draggable: true,
        progress: undefined,
        theme: "light",
    };

    switch (params.severity) {
        case "success":
            toast.success(params.message, commonOptions);
            break;
        case "critical": // 映射到 toast.error
            toast.error(params.message, commonOptions);
            break;
        case "warning":
            toast.warn(params.message, commonOptions);
            break;
        default:
            // 默认类型，或者可以根据需要映射到 toast.info
            toast(params.message, commonOptions);
            break;
    }
};

// 某个组件或业务逻辑文件
import { toastnotify } from "../../shared/Notifications/notifications"; // 根据您的文件路径调整

// 在某个函数或事件处理器内部
const fetchData = async () => {
    try {
        // ... 异步操作
        toastnotify({ severity: "success", message: "数据加载成功！" });
    } catch (error) {
        toastnotify({ severity: "critical", message: "无法获取数据，请稍后再试。" });
    }
};

// 假设在一个按钮点击事件中调用
const handleButtonClick = () => {
    toastnotify({ severity: "warning", message: "这是一个警告信息。" });
};