Reactjs 如何呈现来自全局函数的通知-React

我是React新手，我正在尝试利用

notistack

来处理

ReactJs

，我想通过调用一个helper函数来显示通知，但我不太确定怎么做。以下是使用该组件所需的标准代码：

import { SnackbarProvider } from 'notistack';

<SnackbarProvider maxSnack={3}>
    <App />
</SnackbarProvider>

应用程序组件：

import { SnackbarProvider } from 'notistack';

<SnackbarProvider maxSnack={3}>
    <App />
</SnackbarProvider>

---

我想将

enqueueSnackbar（'my notification message'）

放在一个类或某种助手函数中，这样我就可以从

react

应用程序中的任何位置调用助手函数来显示消息，而不必使用

和Nackbar（MyComponent）包装组件的导出。如何做到这一点？
我将通过上下文API实现这一点，如下所示：


创建一个上下文对象，该对象包含
enqueueSnackbar
函数
然后从最上面的应用程序组件或任何其他父组件传递它
在任何子组件中的任何位置访问它，并根据需要调用它

一些PSEDOO代码：

//context.js
从“React”导入React；
从'notistack'导入{useSnackbar}；
const{enqueueSnackbar}=useSnackbar（）；
const snackbarContext=React.createContext（{enqueueSnackbar}）；
导出默认snackbarContext；

然后使用此上下文的提供程序在树中包装父组件，如下所示：

//parent.js
从“./context.js”导入SnackbarContext
常量应用=（）=>{
返回(
);
}

现在，它可以在虚拟子组件中使用，如下所示：

//child.js
从“React”导入React，{useContext}
从“./context.js”导入SnackbarContext
常量DummyChild=（）=>{
const{enqueueSnackbar}=useContext（SnackbarContext）；
返回(
具有snackbar调用的虚拟组件
将Snackbar（'wohooo'）}>显示Snackbar
)
}