寻求在React组件外使用context hook导出的toast相关函数的可行方案

现有Toast相关基础代码如下：

export const useToast = () => React.useContext(ToastContext);
// 组件内调用逻辑
const { add } = useToast();

以下是除事件发射器之外的两种可落地实现方案： #

方案1：暴露Context方法到独立模块（主流框架通用实现） #

该方案是多数开源Toast组件库的通用实现逻辑，改造成本最低，和原有Context逻辑完全兼容。

1. 新增独立的全局导出模块toastAPI.js

// 用于存储从Provider内部暴露的toast方法
export const toastAPI = {
  add: null
}

2. 改造原有的ToastProvider组件，挂载时同步add方法

import { toastAPI } from './toastAPI'

const ToastProvider = ({ children }) => {
  // 原有Context内部的add方法
  const add = (content, type) => { /* 原有toast逻辑 */ }

  // 组件挂载时把方法赋值到全局导出对象
  React.useEffect(() => {
    toastAPI.add = add
    return () => {
      // 卸载时清空避免内存泄漏
      toastAPI.add = null
    }
  }, [add])

  return (
    <ToastContext.Provider value={{ add }}>
      {children}
    </ToastContext.Provider>
  )
}

3. 组件外部直接调用

// 任意非组件的工具文件、请求封装文件都可以直接导入使用
import { toastAPI } from './toastAPI'

// 示例：请求错误时触发toast
export const fetchData = async () => {
  try {
    const res = await fetch('/api/xxx')
  } catch (err) {
    // 调用前加可选链，避免Provider未挂载时调用报错
    toastAPI.add?.('请求失败，请稍后重试', 'error')
  }
}

注意事项：必须确保项目根组件已经包裹ToastProvider且完成挂载后再调用该方法，否则toastAPI.add会为null。

方案2：动态挂载Toast组件（完全不依赖Context） #

如果不想改动原有Provider逻辑，可以直接封装独立的toast工具函数，手动创建DOM节点渲染Toast组件，完全脱离组件树和Context限制。

import React from 'react'
import ReactDOM from 'react-dom/client'
// 引入你自己封装的Toast单例组件
import Toast from './Toast'

// 全局存储渲染根节点
let toastRoot = null
const CONTAINER_ID = 'global-toast-wrapper'

// 初始化容器节点
const initContainer = () => {
  let container = document.getElementById(CONTAINER_ID)
  if (!container) {
    container = document.createElement('div')
    container.id = CONTAINER_ID
    document.body.appendChild(container)
  }
  toastRoot = ReactDOM.createRoot(container)
}

export const addToast = (content, type = 'info', duration = 3000) => {
  if (!toastRoot) initContainer()
  // 渲染Toast组件
  toastRoot.render(<Toast content={content} type={type} />)
  // 到达展示时长后自动销毁
  setTimeout(() => {
    toastRoot.unmount()
    toastRoot = null
  }, duration)
}

注意事项：如果需要支持多个toast同时展示、队列展示等能力，需要自行维护toast实例的队列逻辑。

内容的提问来源于stack exchange，提问作者Utkarsh Kumar