如何为 Material-UI Snackbar 制作可重用组件？

Question

我有这个 Alert 组件，仅用于显示一条消息“已成功提交”，我正尝试在父组件中使用 thin。但是，父组件中没有任何显示。

AlertComponent

import React, { useState } from "react";
import { Snackbar, Alert } from "@mui/material";

const AlertComponent = () => {
  const [open, setOpen] = useState(false);
  const handleClick = () => {
    setOpen(true);
  };

  const handleClose = (event, reason) => {
    if (reason === "clickaway") {
      return;
    }

    setOpen(false);
  };
  return (
    <div>
      {" "}
      <Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
        <Alert onClose={handleClose} severity="success">
          Successfully Submitted!
        </Alert>
      </Snackbar>
    </div>
  );
};

export default AlertComponent;

父组件

const ParentComponent = () => {
  const [open, setOpen] = useState(false);

       const onSubmit = async (data) => {
   //codes to submit the data
    setOpen(true); //trigger the alert component
   
  };
 
  return (
    <div>
      //form here to submit
      <AlertComponent open={open} />
    </div>
  );
};

export default ParentComponent;

我该如何解决这个问题？谢谢。

Answer 1

尽管@Ghader Salehi 已经评论了解决方案，但如果有人不确定如何控制来自 parent 的警报，请查看代码。

AlertComponent.js

import React from "react";
import { Snackbar, Alert } from "@mui/material";
function AlertComponenet(props) {
  const { open, handleClose } = props;
  return (
    <div>
      {" "}
      <Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
        <Alert onClose={handleClose} severity="success">
          Successfully Submitted!
        </Alert>
      </Snackbar>
    </div>
  );
}

export default AlertComponenet;

Parent 组件（在我的 code-sandbox 中我使用了 App.js）

import React, { useState } from "react";
import "./styles.css";
import AlertComponent from "./AlertComponent";

export default function App() {
  const [open, setOpen] = useState(false);
  const handleClick = () => {
    setOpen(true);
  };

  const handleClose = (event, reason) => {
    if (reason === "clickaway") {
      return;
    }

    setOpen(false);
  };
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button onClick={handleClick}>Show Alert</button>
      <AlertComponent open={open} handleClose={handleClose} />
    </div>
  );
}

如何为 Material-UI Snackbar 制作可重用组件？

How can I make a reusable component for Material-UI Snackbar?

javascript

reactjs

material-ui