Reactjs 通过方法显示MaterialUi snackbar

我想通过只调用方法在material.ui中显示消息，而不是将组件加载到父组件（比如toastify.js）。所以，我写了如下示例。但我无法调用showSnapshot（）方法。我怎样才能做到这一点

注意：我不想像那样将组件添加到演示js中。我只想按函数显示snackbar调用。

Demo.js

import React from "react";
import Button from "@material-ui/core/Button";
import SnackHelper from "./snackHelper";

export default function PositionedSnackbar() {
  function showMessage() {
    console.log("I want call snackHelper.showSnack");
    // snackHelper.showSnack();
  }

  return (
    <div>
      <Button variant="contained" onClick={() => showMessage()}>
        SHOW MESSAGE
      </Button>
    </div>
  );
}

import React from "react";
import Snackbar from "@material-ui/core/Snackbar";

export default function SnackHelper() {
  const [state, setState] = React.useState({
    open: false
  });

  const { vertical, horizontal, open } = state;

  const showSnack = (newState) => () => {
    setState({ open: true, ...newState });
  };

  const handleClose = () => {
    setState({ ...state, open: false });
  };

  return (
    <div>
      <Snackbar
        anchorOrigin={{ vertical, horizontal }}
        open={open}
        onClose={handleClose}
        message=""
        key={vertical + horizontal}
      />
    </div>
  );
}

从“React”导入React；
从“@物料界面/核心/按钮”导入按钮；
从“/SnackHelper”导入SnackHelper；
导出默认函数PositionedSnackbar（）{
函数showMessage（）{
log（“我想要调用snackHelper.showsnakt”）；
//snackHelper.shownack（）；
}
返回(
showMessage（）}>
显示消息
);
}

snackbarHelper.js

import React from "react";
import Button from "@material-ui/core/Button";
import SnackHelper from "./snackHelper";

export default function PositionedSnackbar() {
  function showMessage() {
    console.log("I want call snackHelper.showSnack");
    // snackHelper.showSnack();
  }

  return (
    <div>
      <Button variant="contained" onClick={() => showMessage()}>
        SHOW MESSAGE
      </Button>
    </div>
  );
}

import React from "react";
import Snackbar from "@material-ui/core/Snackbar";

export default function SnackHelper() {
  const [state, setState] = React.useState({
    open: false
  });

  const { vertical, horizontal, open } = state;

  const showSnack = (newState) => () => {
    setState({ open: true, ...newState });
  };

  const handleClose = () => {
    setState({ ...state, open: false });
  };

  return (
    <div>
      <Snackbar
        anchorOrigin={{ vertical, horizontal }}
        open={open}
        onClose={handleClose}
        message=""
        key={vertical + horizontal}
      />
    </div>
  );
}

从“React”导入React；
从“@material ui/core/Snackbar”导入Snackbar；
导出默认函数SnackHelper（）{
常量[状态，设置状态]=React.useState({
开放：假
});
常量{垂直、水平、打开}=状态；
const shownack=（newState）=>（）=>{
setState（{open:true，…newState}）；
};
常量handleClose=（）=>{
setState（{…状态，打开：false}）；
};
返回(
);
}

我在这篇文章中找到了与我所寻找的相同的解决方案。唯一的区别是，这是用于确认对话框，由typescript编写。但是，可以通过javascript轻松地将其更改为toast消息

---

您可以获得工作示例代码

您可以签出一个名为notistack（）的包。它正是你想要做的。基本上，您使用一个提供者来包装整个应用程序，并调用上下文方法来触发一个snackbar。但是，如果您决定不使用它，您可以实现自己的。谢谢您的回复@dev_junwen。是的，toastify.js和notistack.js正在这样做。但我不想在我的项目中添加额外的包。所以，如果可能的话，我想写我自己。是的，你应该总是把你的小吃条放在主组件上。你不能仅仅用一个简单的函数在html中显示一些东西，而不以元素为目标或添加元素。是的，他们可以，因为你将整个组件包装在他们的组件中，像reducer+action这样的东西确实适合你。是的，应该很好，从react文档了解有关制作reducer和上下文的更多信息，通过使用它们，您可以创建全局状态和操作。你可以做任何事，只要呼吁一个行动。