2

我想通过仅调用方法而不是将组件添加到父组件（如 toastify.js）来在 material.ui 中显示消息。所以，我写了下面的例子。但我不能调用 showSnack() 方法。我怎样才能做到这一点？

注意：我不想像 <SnackbarHelper /> 这样在演示 js 中添加组件。我只想显示按函数调用的小吃吧。

CODESANDBOX 链接

演示.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>
  );
}

小吃吧助手.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>
  );
}
4

1 回答 1

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

于 2021-01-04T06:50:14.793 回答