React-Bootstrap Toasts 组件

React-Bootstrap Toasts 组件使网站的通知消息更加美观，易于用户查看。它们是短暂的消息，出现在屏幕的某个位置，然后很快消失。您可以使用它们来显示成功、警告、错误或信息消息。

通知栏用于向用户传达事务状态和状态变化。Toast 是这种通知栏的一种小型轻量级的表示形式。Toast 可以出现在屏幕的任何位置，通常不需要用户的操作即可自动消失。Toast 可以包含文本和操作按钮。

React-Bootstrap Toasts 组件很容易使用，并提供了多种自定义选项，使开发人员可以根据自己的需求轻松创建漂亮的通知消息。

安装

要使用 React-Bootstrap Toasts 组件，您需要在项目中安装 Bootstrap 和 React-Bootstrap。您可以使用 npm 或 yarn 安装这两个依赖项。

npm install bootstrap react-bootstrap

示例

下面是基本 React-Bootstrap Toasts 组件的示例：

import { Toast, ToastContainer } from 'react-bootstrap';

function App() {
  return (
    <ToastContainer>
      <Toast>
        <Toast.Body>Hello, world!</Toast.Body>
      </Toast>
    </ToastContainer>
  );
}

在上述示例中，我们使用了 ToastContainer 和 Toast 组件。ToastContainer 是 Toast 组件的容器，我们使用 Toast 组件来创建消息。

自定义

React-Bootstrap Toasts 组件提供了许多自定义选项，您可以使用这些选项根据自己的需求定制消息。下面是一些常见的选项：

• className：用于设置 Toast 组件的 CSS 类名称。
• onClose：用于设置关闭 Toast 组件时的回调函数。
• delay：用于设置 Toast 组件的显示时间，以毫秒为单位。
• animation：用于设置 Toast 组件的动画效果。

下面是使用这些选项的示例：

import { Toast, ToastContainer } from 'react-bootstrap';

function App() {
  const handleClose = () => {
    console.log('Toast closed');
  };

  return (
    <ToastContainer>
      <Toast className="my-toast" onClose={handleClose} delay={5000} animation>
        <Toast.Header>
          <strong className="mr-auto">React-Bootstrap Toasts</strong>
          <small>11 mins ago</small>
        </Toast.Header>
        <Toast.Body>Hello, world!</Toast.Body>
      </Toast>
    </ToastContainer>
  );
}

在上述示例中，我们使用了 className、onClose、delay 和 animation 这些选项。我们定义了 handleClose 回调函数，在 Toast 组件关闭时调用它。我们还设置了显示时间为 5000 毫秒，并启用了动画效果。