解决 React-Toastify 升级后通知不渲染问题-js教程-PHP中文网

解决 React-Toastify 升级后通知不渲染问题

本文旨在解决 React-Toastify 从 v7 升级到 v9 后通知不渲染的问题。通过分析代码变更和社区反馈，我们发现该问题通常源于特定版本（如 v9.0.3）的已知 bug。解决方案是升级到修复了这些问题的版本（如 v9.1.2 或更高），并结合最佳实践，确保 ToastContainer 的正确配置和使用，从而恢复通知功能。

问题描述：React-Toastify 升级后的渲染故障

许多开发者在使用 react-toastify 库时，可能会遇到从旧版本（如 v7.0.3）升级到新版本（如 v9.0.3）后，通知（toast）组件无法正常渲染的问题。尽管代码逻辑看似正确，且遵循了官方文档，但通知框却始终不显示。这通常发生在项目依赖升级后，尤其是在主要版本更新时。

用户通常会采取以下步骤：

升级 react-toastify 依赖：yarn add react-toastify@9.0.3。
调整通知封装文件（例如 notifications.js），以适应新版本的 API。
在 App.js 或根组件中引入并渲染 ToastContainer。
在应用中调用封装的 toastnotify 函数来触发通知。

然而，即便完成了这些步骤，通知仍可能无法显示。

代码变更分析

在深入探讨解决方案之前，我们先对比一下旧版本（v7）和新版本（v9）中通知封装文件的主要差异，这有助于我们理解潜在的问题点。

v7.0.3 版本的 notifications.js 示例：

import { Notification } from '@scuf/common'; // 引入外部UI库的Notification组件
import './notifications.scss';
import 'react-toastify/dist/ReactToastify.css';

const ReactToastify =  require('react-toastify');

export const toastnotify = (params) => {
    ReactToastify.toast( // 将外部组件作为内容传递给toast
        <Notification
            hasIcon={true}
            className="toast-notification"
            severity={params.severity}
            title={params.title}
        >
            {params.message || ""}
        </Notification>
    )
}

export const NotificationContainer = (props) => {
    return(
        <ReactToastify.ToastContainer // 使用ReactToastify.ToastContainer
            hideProgressBar={true}
            autoClose={12000}
            closeOnClick={true}
            closeButton={false}
            newestOnTop={true}
            position="bottom-right"
            toastClassName="toast-notification-wrap"
        />
    )
}

登录后复制

v9.0.3 版本的 notifications.js 示例：

import React from "react";
import { ToastContainer, toast } from "react-toastify"; // 直接从react-toastify导入toast和ToastContainer
import "react-toastify/dist/ReactToastify.css";
// const ReactToastify = require("react-toastify"); // 此行在v9版本中变得多余或可能引起混淆

export const toastnotify = (params) => {
    switch (params.severity) {
        case "success":
            toast.success(params.message, { /* 配置 */ }); // 直接使用toast.success等方法
            break;
        case "critical":
            toast.error(params.message, { /* 配置 */ });
            break;
        case "warning":
            toast.warn(params.message, { /* 配置 */ });
            break;
        default: toast(params.message);
            break;
    }
};

export const ToastNotificationsContainer = (props) => {
    return (
        <ToastContainer // 使用直接导入的ToastContainer
            position="top-right"
            autoClose={3000}
            hideProgressBar={false}
            newestOnTop={false}
            closeOnClick
            rtl={false}
            pauseOnFocusLoss
            draggable
            pauseOnHover
            theme="light" />
    );
};

// 注意：这里存在另一个名为 NotificationContainer 的导出，其内部再次使用了 ReactToastify.ToastContainer
// 这可能导致在App.js中引入错误或产生多个ToastContainer实例
export const NotificationContainer = (props) => {
    return (<ReactToastify.ToastContainer
        hideProgressBar={true}
        autoClose={3000}
        closeOnClick={true}
        closeButton={false}
        newestOnTop={true}
        position="top-right"
        toastClassName="toast-notification-wrap" />);
};

登录后复制

关键差异点：

toastnotify 的实现方式：v7 版本将一个外部 UI 库的 Notification 组件作为 ReactToastify.toast 的内容传递。而 v9 版本则直接使用了 react-toastify 提供的 toast.success()、toast.error() 等方法，这是更推荐和现代的用法。
ToastContainer 的导入与使用：v9 版本直接从 react-toastify 导入 ToastContainer，这是正确的。然而，在提供的 v9 代码中，存在两个导出的 ToastContainer 组件 (ToastNotificationsContainer 和 NotificationContainer)，其中 NotificationContainer 仍然使用了 require('react-toastify') 方式获取的 ToastContainer。这种重复和不一致性可能导致问题。
require('react-toastify') 的使用：在现代 React 应用中，通常直接使用 ES Module 的 import 语句。require 方式在 v9 版本的 notifications.js 中显得有些多余，并可能与 import { ToastContainer, toast } from "react-toastify"; 产生冲突或混淆。

根本原因探究与解决方案

经过分析，虽然代码逻辑上的改动（特别是 toastnotify 方法的实现）是符合新版本 API 的，但导致通知不渲染的根本原因，很可能并非代码逻辑错误，而是 React-Toastify 库在特定版本（如 v9.0.3）中存在的已知 bug。

社区中曾有用户报告在 9.0.3 版本中遇到类似的渲染问题，该问题在后续的补丁版本中得到了修复。

解决方案：

最直接有效的解决方案是升级 react-toastify 到修复了此问题的版本，例如 9.1.2 或更高版本。

yarn add react-toastify@latest
# 或者指定版本
yarn add react-toastify@9.1.2

登录后复制

通过升级到最新的稳定版本，可以解决由于库内部 bug 导致的渲染问题。您可以在 React-Toastify 的 GitHub 仓库的 "Issues" 区找到相关讨论，例如 Issue #961 就提到了类似的问题。

无涯·问知

无涯·问知，是一款基于星环大模型底座，结合个人知识库、企业知识库、法律法规、财经等多种知识源的企业级垂直领域问答产品

查看详情

React-Toastify 最佳实践

除了升级库版本，以下最佳实践有助于确保 React-Toastify 的稳定和高效运行：

1. 单一 ToastContainer 原则

在整个应用中，只能渲染一个 ToastContainer 组件。将其放置在应用的根组件（如 App.js）中，确保它在所有需要显示通知的组件之上。

示例：App.js

import React, { Fragment } from 'react';
import { ToastContainer } from 'react-toastify'; // 确保只从这里导入一次
import 'react-toastify/dist/ReactToastify.css'; // 全局引入CSS

// 其他组件
import AppHeader from './AppHeader';
import AppSidebar from './AppSidebar';
import AppFooter from './AppFooter';

function App() {
  return (
    <Fragment>
      <AppHeader />
      <ToastContainer // 放置在应用的根部
        position="top-right"
        autoClose={5000}
        hideProgressBar={false}
        newestOnTop={false}
        closeOnClick
        rtl={false}
        pauseOnFocusLoss
        draggable
        pauseOnHover
        theme="light"
      />
      <AppSidebar />
      <AppFooter />
    </Fragment>
  );
}

export default App;

登录后复制

2. 统一的通知封装

创建一个专门的模块来封装 toast 调用，这样可以集中管理通知的样式和行为，提高代码的可维护性。

示例：shared/Notifications/notifications.js

import { toast } from "react-toastify"; // 仅导入toast函数

/**
 * 封装的通知函数
 * @param {object} params - 通知参数
 * @param {string} params.severity - 通知类型 ('success', 'error', 'warning', 'info' 或 'default')
 * @param {string} params.message - 通知内容
 * @param {string} [params.title] - 通知标题 (如果需要自定义内容)
 * @param {object} [params.options] - 覆盖默认配置的toast选项
 */
export const showToast = (params) => {
    const defaultOptions = {
        position: "top-right",
        autoClose: 3000,
        hideProgressBar: false,
        closeOnClick: true,
        pauseOnHover: true,
        draggable: true,
        progress: undefined,
        theme: "light",
    };

    const options = { ...defaultOptions, ...params.options };

    switch (params.severity) {
        case "success":
            toast.success(params.message, options);
            break;
        case "error":
            toast.error(params.message, options);
            break;
        case "warning":
            toast.warn(params.message, options);
            break;
        case "info":
            toast.info(params.message, options);
            break;
        default:
            toast(params.message, options);
            break;
    }
};

// 不需要在这里导出ToastContainer，因为它应该在App.js中直接使用

登录后复制

3. 正确引入 CSS

确保 react-toastify/dist/ReactToastify.css 被全局引入，通常在 App.js 或入口文件中引入。

import 'react-toastify/dist/ReactToastify.css';

登录后复制

4. 调用通知

在需要显示通知的地方，直接调用封装好的 showToast 函数。

示例：组件内部调用

import React from 'react';
import { showToast } from "../../shared/Notifications/notifications"; // 导入封装的通知函数

function MyComponent() {
  const handleClick = () => {
    showToast({ severity: "success", message: "操作成功！" });
  };

  const handleError = () => {
    showToast({ severity: "error", message: "无法获取日志详情。", options: { autoClose: 5000 } });
  };

  return (
    <div>
      <button onClick={handleClick}>显示成功通知</button>
      <button onClick={handleError}>显示错误通知</button>
    </div>
  );
}

export default MyComponent;

登录后复制

注意事项与总结

版本兼容性：在升级任何第三方库时，务必查阅其官方文档、发布说明（Release Notes）和变更日志（Changelog），特别是涉及主要版本更新时。这可以帮助您了解可能存在的破坏性变更（Breaking Changes）和新功能。
社区资源：当遇到难以解决的问题时，首先检查库的 GitHub Issue 区。很多时候，您遇到的问题可能已经被其他人发现并报告，甚至已经有了解决方案或变通方法。
调试：如果通知仍未显示，请检查浏览器的开发者工具：
- React DevTools：确认 ToastContainer 组件是否被正确渲染在 DOM 中。
- 控制台：检查是否有任何错误或警告信息。
- DOM 结构：查看 body 元素下是否生成了 react-toastify 相关的 DOM 元素。
避免重复导入/渲染：确保 ToastContainer 只被导入和渲染一次。在上述 v9 代码中，NotificationContainer 再次导出了一个 ToastContainer，这可能是导致问题的一个隐患。