如何将material-ui Snackbar实现为全局功能？

问题描述

我正在使用material-ui Snackbar创建我的react应用。 在我的项目中，我有很多组件，并且不想在每个组件中插入。 有没有一种方法可以创建显示小吃店的功能，然后只需在每个组件中导入并使用此功能？

类似的东西：

从“ SnackbarUtils”导入showSnackbar；

showSnackbar（'成功消息'）;

解决方法

你必须以反应的方式来做。您可以通过创建高阶组件来实现这一点。

1. 创建一个 HOC，返回一个 snackbar 组件和包装的组件
2. 在该 HOC 中创建一个函数，该函数接受消息、严重性（如果您像我一样使用 Alert）、持续时间并设置设置为 props of the snackbar 的适当状态。并将该函数作为道具传递给wrappedComponent。
3. 最后在你想显示小吃店的任何地方导入这个 HOC，在其中传递你的组件并从你想要的事件处理程序中的 prop (this.prop.functionName('Hello there!')) 调用 HOC 函数显示小吃店并传递一条消息。

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