从React中最低层次的组件触发警报(https://material-ui.com/components/alert/#alert)

Question

所以事情是正常的警报工作方式类似于Alert("msg to be displayed");，但我想使用材料警报UI。它们的工作方式类似于返回JSX组件。<Alert severity="success">This is a success alert — check it out!</Alert>。我能够实现这一点，但问题是我传递JSX的地方，它发生在网格中，它不在web应用程序的顶部。那么如何克服这个问题，这样我就可以从任何地方传递Alert，并且它会在应用程序的顶部区域弹出。

我有4-5个分层组件，我试图通过每个组件的道具传递警报触发器，它起作用了，但它很麻烦。

Answer 1

在索引文件的状态下警告一个名为-Define的变量

-Create一个名为setAlert的函数，该函数使警报与所需的jsx相等

-Create另一个函数hideAlert，用于将警报设置为空字符串或任何您认为方便不显示警报的值

在主应用程序组件的返回中-Place变量。

-Make确保警报被放置在具有绝对位置和正确样式的div中。

通过上下文或简单地将道具传递给所有其他组件来-Pass setAlert和hideAlert函数。

瞧！