当前位置：首页 > React

react 实现toast

2026-01-26 14:46:27React

实现 React Toast 通知组件

在 React 中实现 Toast 通知可以通过自定义组件或使用第三方库完成。以下是两种常见方法：

自定义 Toast 组件

react 实现toast

创建一个可复用的 Toast 组件，通过状态管理控制显示/隐藏：

import React, { useState, useEffect } from 'react';

const Toast = ({ message, duration = 3000, onClose }) => {
  const [visible, setVisible] = useState(true);

  useEffect(() => {
    const timer = setTimeout(() => {
      setVisible(false);
      onClose && onClose();
    }, duration);
    return () => clearTimeout(timer);
  }, [duration, onClose]);

  return visible ? (
    <div style={{
      position: 'fixed',
      bottom: '20px',
      right: '20px',
      padding: '12px 16px',
      background: '#333',
      color: 'white',
      borderRadius: '4px',
      boxShadow: '0 2px 10px rgba(0,0,0,0.1)',
      zIndex: 1000
    }}>
      {message}
    </div>
  ) : null;
};

// 使用示例
function App() {
  const [toasts, setToasts] = useState([]);

  const addToast = (message) => {
    const id = Date.now();
    setToasts([...toasts, { id, message }]);
  };

  const removeToast = (id) => {
    setToasts(toasts.filter(toast => toast.id !== id));
  };

  return (
    <div>
      <button onClick={() => addToast('This is a toast message!')}>
        Show Toast
      </button>
      {toasts.map(toast => (
        <Toast
          key={toast.id}
          message={toast.message}
          onClose={() => removeToast(toast.id)}
        />
      ))}
    </div>
  );
}

使用第三方库

react 实现toast

流行的 React Toast 库提供更多功能和自定义选项：

react-toastify (推荐)
```
npm install react-toastify
```

import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

function App() {
  const showToast = () => {
    toast.success('Operation completed!', {
      position: "top-right",
      autoClose: 5000,
      hideProgressBar: false,
      closeOnClick: true,
      pauseOnHover: true,
      draggable: true,
    });
  };

  return (
    <div>
      <button onClick={showToast}>Show Toast</button>
      <ToastContainer />
    </div>
  );
}

sonner (轻量级替代方案)
```
npm install sonner
```

import { Toaster, toast } from 'sonner';

function App() {
  return (
    <div>
      <button onClick={() => toast('My first toast')}>
        Show Toast
      </button>
      <Toaster position="top-center" richColors />
    </div>
  );
}

关键实现要点