React Toastify v10.0.4报错：toast.configure不是函数，求荐适配通知库

一、解决"toast.configure is not a function"报错 #

React Toastify从v9版本起就移除了toast.configure()方法，v10完全不再支持这个API，全局配置需要通过<ToastContainer>组件的props来实现。另外你之前的代码里没渲染<ToastContainer>组件，这也会导致通知无法正常显示。

修改后的App.js代码如下：

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

function GeeksforGeeks() {
  const notify = () => {
    // 内置通知类型
    toast.warning("Danger");
    toast.success("successful");
    toast.info("GeeksForGeeks");
    toast.error("Runtime error");
    // 默认通知
    toast("Hello Geeks");
  };

  return (
    <div className="GeeksforGeeks">
      <button onClick={notify}>Click Me!</button>
      {/* 全局配置通过ToastContainer的props设置 */}
      <ToastContainer
        position="top-right"
        autoClose={5000}
        hideProgressBar={false}
        newestOnTop={false}
        closeOnClick
        rtl={false}
        pauseOnFocusLoss
        draggable
        pauseOnHover
      />
    </div>
  );
}

export default GeeksforGeeks;

核心调整点：

• 删除toast.configure()调用
• 将原全局配置项转移到<ToastContainer>的props中（比如autoClose控制自动关闭时长，position控制通知位置）
• 必须在组件JSX中渲染<ToastContainer>，否则通知无法渲染到页面上

二、符合需求的通知库推荐 #

1. React Toastify（本身就能满足你的需求） #

你当前使用的React Toastify完全可以实现标题+描述+关闭图标的通知，不需要换库，示例代码如下：

const notifyWithTitle = () => {
  toast(
    <div>
      <h4>账户通知</h4>
      <p>您的会员服务即将到期，请及时续费以享受完整权益</p>
    </div>,
    {
      closeButton: true, // 强制显示关闭图标
      autoClose: false // 关闭自动关闭，需手动点击图标关闭
    }
  );
};

通过传入自定义JSX内容就能实现标题+描述结构，closeButton属性控制关闭图标显示，点击图标即可关闭通知。

2. React Notifications Component #

这是一款配置灵活的通知库，原生支持标题、描述和关闭按钮，使用门槛低：
首先安装依赖：

npm install react-notifications-component

然后编写使用代码：

import ReactNotificationsComponent from 'react-notifications-component';
import { Store } from 'react-notifications-component';
import 'react-notifications-component/dist/theme.css';

// 触发通知的函数
const showCustomNotification = () => {
  Store.addNotification({
    title: "操作成功",
    message: "您的文件已上传至云端，可在个人中心查看",
    type: "success",
    container: "top-right",
    dismiss: {
      duration: 6000,
      showIcon: true // 显示关闭图标
    }
  });
};

// 根组件中渲染通知容器
function App() {
  return (
    <div>
      <ReactNotificationsComponent />
      <button onClick={showCustomNotification}>显示通知</button>
    </div>
  );
}

它的配置项丰富，能快速实现你需要的通知样式和交互。

内容的提问来源于stack exchange，提问作者Prasad Patel