解决 React-Toastify 升级后不渲染问题：版本兼容与最佳实践

yarn add react-toastify@^9.1.2
# 或者
npm install react-toastify@^9.1.2

import React from "react";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css"; // 确保导入CSS

/**
 * 封装的通知方法，用于根据严重程度显示不同类型的通知。
 * @param {object} params - 通知参数
 * @param {string} params.severity - 通知类型：'success', 'critical', 'warning'
 * @param {string} params.message - 通知内容
 */
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(params.message, commonOptions);
            break;
        case "warning":
            toast.warn(params.message, commonOptions);
            break;
        default:
            toast(params.message, commonOptions);
            break;
    }
};

/**
 * 应用全局的 ToastContainer 组件。
 * 确保此组件在应用中只渲染一次。
 */
export const AppToastContainer = () => {
    return (
        <ToastContainer
            position="top-right"
            autoClose={3000}
            hideProgressBar={false}
            newestOnTop={false}
            closeOnClick
            rtl={false}
            pauseOnFocusLoss
            draggable
            pauseOnHover
            theme="light"
        />
    );
};

import React, { Fragment } from "react";
// 从优化后的 notifications 文件中导入 AppToastContainer
import { AppToastContainer } from "./shared/Notifications/notifications"; 
// 假设 AppHeader, AppSidebar, AppFooter 是你的其他组件
// import AppHeader from './AppHeader'; 
// import AppSidebar from './AppSidebar';
// import AppFooter from './AppFooter';

class App extends React.Component {
  render() {
    return (
      <Fragment>
        {/* <AppHeader /> */}
        {/* 确保 AppToastContainer 只在应用的根组件中渲染一次 */}
        <AppToastContainer /> 
        {/* <AppSidebar>
        </AppSidebar>
        <AppFooter /> */}
      </Fragment>
    );
  }
}

export default App;

import { toastnotify } from "../../shared/Notifications/notifications";

// 在某个函数或组件方法中
const fetchData = async () => {
    try {
        // ... 异步操作
        // toastnotify({ severity: "success", message: "数据加载成功！" });
    } catch (error) {
        toastnotify({ severity: "critical", message: "无法获取日志详情，请稍后再试。" });
    }
};

// 示例调用
fetchData();