Material UI 中的通知

Material UI 是一个流行的 React UI 库，它提供了丰富的组件和工具来构建漂亮、高质量的 Web 应用程序。其中一个重要的组件是通知组件，它可以轻松地向用户显示各种信息、警告和错误。在本文中，我们将介绍 Material UI 中的通知组件，并向开发人员展示如何使用它。

安装 Material UI

要使用 Material UI，您需要将其添加到项目依赖中。可以使用 npm 或 yarn 安装 Material UI：

npm install @material-ui/core
# 或者
yarn add @material-ui/core

导入通知组件

在您的 React 组件中，您需要导入通知组件。你可以这样做：

import { Snackbar } from '@material-ui/core';

Snackbar 是 Material UI 中的通知组件之一。它可以向用户显示简短的信息，例如“保存成功”、“请填写所有必填字段”等。

使用通知组件

要使用 Snackbar 组件，您需要将其在应用程序中的合适位置实例化，并在需要通知用户时显示它。通常，Snackbar 是在顶层组件中实例化的，例如 App 组件。首先，您需要在组件中导入 useState 钩子。

import React, { useState } from "react";

然后，在组件中定义状态和更改状态的函数。

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

const handleClick = () => {
  setOpen(true);
};

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

  setOpen(false);
};

这里，我们使用 useState 钩子来创建名为 open 的布尔状态。默认情况下，Snackbar 是不可见的，因此我们将其初始值设置为 false。然后，我们创建了 handleClick() 和 handleClose() 函数。

handleClick() 函数将在用户执行某些操作时调用，例如提交表单或单击按钮。当用户需要获得通知时，该函数将设置 open 状态为 true。

handleClose() 函数将在 Snackbar 被关闭时调用，例如单击关闭按钮或 Snackbar 显示时间结束时。在这个例子中，我们检查 reason 参数以确定 Snackbar 是否被单击或因超时而关闭。然后，我们将 open 状态设置为 false。

最后，在组件中呈现 Snackbar 组件。

<Snackbar
  open={open}
  autoHideDuration={6000}
  onClose={handleClose}
  message="This is a notification message!"
  action={
    <React.Fragment>
      <Button color="secondary" size="small" onClick={handleClose}>
        CLOSE
      </Button>
      <Button color="primary" size="small" onClick={handleClose}>
        UNDO
      </Button>
    </React.Fragment>
  }
/>

这里，我们将 open 状态传递给 Snackbar 组件。我们还指定了一个 autoHideDuration 属性，该属性规定了 Snackbar 应该显示多长时间。在 onClose 中，我们将传递 handleClose 函数。最后，我们设置一个 message 属性，该属性将显示在 Snackbar 内容中。我们还提供了两个按钮，一个用于关闭 Snackbar，另一个用于撤消操作。这些按钮将作为 action 属性传递。

结论

Material UI 中的通知组件是一个方便的功能，可以轻松向用户显示信息、警告和错误。在本文中，我们了解了如何在您的 React 应用程序中实例化和使用 Snackbar 组件。现在，您可以将这个功能添加到您的项目中，并为用户提供更好的体验。