按方法显示 MaterialUi 小吃栏

Question

我想通过仅调用方法而不将组件添加到父组件（如toastify.js）来在material.ui中显示消息。所以，我写了如下示例。但我无法调用 showSnack() 方法。我怎样才能实现这个目标？

注意：我不想向演示 js 添加组件，例如 <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>
  );
}

小吃吧Helper.js

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>
  );
}

Answer 1

我在这篇文章中找到了与我正在寻找的东西相同的解决方案。唯一的区别是，这是用于确认对话框并由打字稿编写的。但是，可以通过 JavaScript 轻松将其更改为 toast 消息。https://dev.to/dmtrkovalenko/the-neatest-way-to-handle-alert-dialogs-in-react-1aoe

您可以获得工作示例代码https://codesandbox.io/s/neat-dialogs-3h5ou?from-embed=&file=/src/ConfirmationService.tsx