可复用React Toastify组件问题咨询：全局调用与bug修复

核心思路 #

通过单例状态管理器维护全局Toast队列，将Toast组件的渲染逻辑与调用逻辑解耦：父组件只需声明一次ToastSuccess/ToastError组件，子组件直接通过全局导出的Meta对象调用showToast方法，同时解决重复弹窗的问题。

实现步骤 #

1. 全局Toast状态管理器（单例）

创建一个独立的状态管理模块，负责维护Toast的显示队列、通知组件更新，并对外提供调用接口：

// src/toast-manager.js
class ToastManager {
  constructor() {
    this.toasts = [];
    this.listeners = [];
    this.idCounter = 0;
  }

  // 订阅状态更新
  subscribe(listener) {
    this.listeners.push(listener);
    return () => {
      this.listeners = this.listeners.filter(l => l !== listener);
    };
  }

  // 通知所有订阅者更新
  notify() {
    this.listeners.forEach(listener => listener([...this.toasts]));
  }

  // 通用显示方法
  showToast(type, message, options = {}) {
    const id = `toast-${this.idCounter++}`;
    const toast = { id, type, message, ...options };
    this.toasts.push(toast);
    this.notify();

    // 自动关闭逻辑（可通过options覆盖）
    setTimeout(() => {
      this.toasts = this.toasts.filter(t => t.id !== id);
      this.notify();
    }, options.duration || 3000);
  }
}

// 创建单例实例
const toastManager = new ToastManager();

// 导出对应类型的调用接口（即你需要的ToastSuccessMeta/ToastErrorMeta）
export const ToastSuccessMeta = {
  showToast: (message, options) => toastManager.showToast('success', message, options)
};

export const ToastErrorMeta = {
  showToast: (message, options) => toastManager.showToast('error', message, options)
};

export default toastManager;

2. 封装ToastSuccess/ToastError组件

这两个组件负责监听全局状态变化，渲染对应类型的Toast弹窗，父组件只需渲染一次：

// src/ToastSuccess.jsx
import { useEffect, useState } from 'react';
import toastManager from './toast-manager';
// 假设custom-library提供基础容器样式
import 'custom-library/toast-container.css';
import './ToastSuccess.css';

const ToastSuccess = () => {
  const [successToasts, setSuccessToasts] = useState([]);

  useEffect(() => {
    // 订阅全局状态，只过滤success类型的Toast
    const unsubscribe = toastManager.subscribe(toasts => {
      setSuccessToasts(toasts.filter(t => t.type === 'success'));
    });
    return unsubscribe;
  }, []);

  return (
    <div className="toast-container success-container">
      {successToasts.map(toast => (
        <div key={toast.id} className="toast success-toast">
          {toast.message}
        </div>
      ))}
    </div>
  );
};

export default ToastSuccess;

ToastError组件逻辑完全一致，仅需修改类型过滤和样式类：

// src/ToastError.jsx
import { useEffect, useState } from 'react';
import toastManager from './toast-manager';
import 'custom-library/toast-container.css';
import './ToastError.css';

const ToastError = () => {
  const [errorToasts, setErrorToasts] = useState([]);

  useEffect(() => {
    const unsubscribe = toastManager.subscribe(toasts => {
      setErrorToasts(toasts.filter(t => t.type === 'error'));
    });
    return unsubscribe;
  }, []);

  return (
    <div className="toast-container error-container">
      {errorToasts.map(toast => (
        <div key={toast.id} className="toast error-toast">
          {toast.message}
        </div>
      ))}
    </div>
  );
};

export default ToastError;

3. 父组件声明，子组件全局调用

父组件中只需渲染一次ToastSuccess/ToastError：

// src/App.jsx
import ToastSuccess from './ToastSuccess';
import ToastError from './ToastError';
import ChildComponent from './ChildComponent';

function App() {
  return (
    <div className="app">
      {/* 全局只声明一次 */}
      <ToastSuccess />
      <ToastError />
      <ChildComponent />
    </div>
  );
}

export default App;

子组件直接导入Meta对象调用，无需传递ref：

// src/ChildComponent.jsx
import { ToastSuccessMeta, ToastErrorMeta } from './toast-manager';

const ChildComponent = () => {
  return (
    <div>
      <button onClick={() => ToastSuccessMeta.showToast('操作成功！')}>
        显示成功提示
      </button>
      <button onClick={() => ToastErrorMeta.showToast('操作失败，请重试', { duration: 5000 })}>
        显示错误提示
      </button>
    </div>
  );
};

export default ChildComponent;

问题解决说明 #

1. 重复弹窗问题：单例ToastManager确保全局只有一个Toast队列，父组件仅渲染一次Toast容器，不会重复创建实例，彻底解决点击出现两个弹窗的问题。
2. ref传递不优雅问题：子组件通过全局导出的Meta对象直接调用showToast，无需向下传递ref，完全实现「声明一次，全局使用」的效果。
3. custom-library配置Toast-Container：将基础容器的布局、定位等样式放在custom-library中，ToastSuccess/ToastError组件直接引入复用，符合你的需求。

内容的提问来源于stack exchange，提问作者Honey Singh