React MUI封装Alert消息组件,告别繁琐配置，提升编码效率

2024-02-05 06:48:18

前言

在现代前端开发中，消息组件是不可或缺的元素，它们可以帮助我们向用户传达重要的信息，例如错误提示、成功通知或警告信息。Material-UI 是 React 中最受欢迎的 UI 组件库之一，它提供了丰富的组件，包括消息组件 Alert。然而，Alert 组件需要与 Snackbar 组件结合使用，这在每个界面都要重复的代码编写，使得开发过程变得繁琐且低效。

封装 Alert 消息组件

为了解决这个问题，我们可以将 Alert 组件封装成一个独立的组件，这样我们就可以在需要的时候直接使用它，而无需每次都重复编写相同的代码。

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

const MyAlert = (props) => {
  const { severity, message } = props;

  return <Alert severity={severity}>{message}</Alert>;
};

export default MyAlert;

在这个组件中，我们接受了 severity 和 message 两个属性，分别用于设置警报的严重程度和消息内容。组件的实现非常简单，我们只需将这两个属性传递给 Alert 组件即可。

使用封装组件

现在，我们就可以在需要的时候直接使用这个组件了。例如，在登录页面，我们可以使用它来显示登录成功或失败的消息：

import MyAlert from "./MyAlert";

const LoginPage = () => {
  const [loginStatus, setLoginStatus] = useState(false);

  const handleLogin = () => {
    // 登录逻辑...

    if (loginStatus) {
      setLoginStatus(true);
    } else {
      setLoginStatus(false);
    }
  };

  return (
    <div>
      <form onSubmit={handleLogin}>
        {/* ... */}
      </form>

      {loginStatus && <MyAlert severity="success" message="登录成功！" />}
      {!loginStatus && <MyAlert severity="error" message="登录失败，请重试！" />}
    </div>
  );
};

export default LoginPage;