javascript - 如何将material-ui Snackbar实现为全局函数？

Question

我正在使用 material-ui Snackbar 创建我的 react 应用程序.
在我的项目中，我有很多组件，不想在每个组件中插入 。
有没有办法创建将显示 snackbar 的功能，然后在每个组件中导入并使用此功能？
就像是:

import showSnackbar from 'SnackbarUtils';

showSnackbar('Success message');

Answer 1

你必须以 react 的方式来做。您可以通过创建高阶组件来实现此目的。

创建一个返回 snackbar 的 HOC组件以及 WrappedComponent

在该 HOC 中创建一个函数，它接受消息、严重性(如果您像我一样使用 Alert)、持续时间并设置设置为 props of the snackbar 的适当状态.并将该函数作为 Prop 传递给 WrappedComponent。

最后将这个 HOC 导入到任何你想显示 snackbar 的地方，将你的组件传入其中，然后在你想显示 snackbar 的事件处理程序中从 prop (this.prop.functionName('Hello there!')) 调用 HOC 函数并传递一条消息。

看一下这个。
https://stackblitz.com/edit/snackbar-hoc?file=src/SnackbarHOC.js