使用 React 编写全局 Toast 的示例代码

在 React 应用中，全局 Toast（弹出式消息提示）是一种常见且实用的用户反馈机制。它可以用于向用户传达重要的信息，如操作成功、错误提示等。以下是一个使用 React 编写全局 Toast 的示例代码，帮助您在项目中轻松实现这一功能。

我们创建一个 Toast 组件来定义 Toast 的外观和行为。

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

const Toast = ({ message, type }) => {
  const [show, setShow] = useState(true);

  useEffect(() => {
    const timer = setTimeout(() => {
      setShow(false);
    }, 3000);

    return () => clearTimeout(timer);
  }, []);

  return (
    show && (
      <div className={`toast ${type}`}>
        {message}
      </div>
    )
  );
};

在上述代码中，我们使用 useState 钩子创建了一个 show 状态来控制 Toast 的显示与否。通过 useEffect 钩子设置一个 3 秒的定时器，自动隐藏 Toast。

接下来，我们创建一个全局的 ToastContext 来管理 Toast 的显示和隐藏。

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

const ToastContext = createContext();

const ToastProvider = ({ children }) => {
  const [toastMessage, setToastMessage] = useState('');
  const [toastType, setToastType] = useState('');

  const showToast = (message, type) => {
    setToastMessage(message);
    setToastType(type);
  };

  return (
    <ToastContext.Provider value={{ showToast }}>
      {children}
      <Toast message={toastMessage} type={toastType} />
    </ToastContext.Provider>
  );
};

export { ToastProvider, ToastContext };

在组件的使用中，我们可以通过 ToastContext 来触发 Toast 的显示。

import React, { useContext } from'react';
import { ToastContext } from './ToastContext';

const SomeComponent = () => {
  const { showToast } = useContext(ToastContext);

  const handleClick = () => {
    showToast('操作成功！', 'success');
  };

  return (
    <button onClick={handleClick}>执行操作</button>
  );
};

通过以上的示例代码，我们实现了一个简单的全局 Toast 功能。您可以根据实际需求进一步自定义 Toast 的样式和行为，以满足项目的特定要求。

使用 React 编写全局 Toast 可以提升用户体验，让用户及时获取重要的反馈信息。希望这个示例对您在 React 项目中的开发有所帮助。