如何用 React 构建一套优雅的 Toast 组件

2024-02-11 12:24:08







## 前言

在现代前端开发中，Toast 组件已被广泛应用于各种项目中，它作为一种非侵入性的通知工具，可以帮助用户及时获取重要信息或反馈。本文将通过详细的步骤和示例，为您介绍如何使用 React 来构建一套优雅的 Toast 组件，从而提升您的项目交互体验。

## Toast 组件的设计原则

在设计 Toast 组件时，需要遵循以下几个原则：

* **轻量级：**  Toast 组件不应该对项目性能造成显著影响。
* **易用性：**  Toast 组件应该易于使用，以便开发人员能够快速将其集成到项目中。
* **可定制性：**  Toast 组件应该支持高度的可定制性，以便开发人员能够根据项目需求对其进行自定义。
* **可复用性：**  Toast 组件应该能够在不同的项目中重复使用。

## Toast 组件的实现

### 1. 创建一个新的 React 组件

```javascript
import React from "react";

const Toast = (props) => {
  return (
    <div className="toast">
      <div className="toast-header">
        <strong className="mr-auto">{props.title}</strong>
        <button type="button" className="close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div className="toast-body">
        {props.message}
      </div>
    </div>
  );
};

export default Toast;

2. 使用 Toast 组件

import Toast from "./Toast";

const App = () => {
  const [toast, setToast] = useState(null);

  const showToast = (title, message) => {
    setToast({ title, message });
  };

  return (
    <div>
      <button type="button" onClick={() => showToast("成功", "操作成功！")}>
        显示 Toast
      </button>

      {toast && <Toast title={toast.title} message={toast.message} />}
    </div>
  );
};

export default App;