当前位置：首页 > React

React如何实现通知

2026-03-30 21:50:16React

React 实现通知的方法

在 React 中实现通知功能可以通过多种方式，以下是几种常见的方法：

使用第三方库

React 生态系统中有许多专门用于通知的第三方库，例如 react-toastify、notistack 或 react-notifications。这些库提供了开箱即用的通知组件，支持自定义样式、动画和交互行为。

安装 react-toastify：

npm install react-toastify

使用示例：

React如何实现通知

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

function App() {
  const showNotification = () => {
    toast.success('This is a success notification!');
  };

  return (
    <div>
      <button onClick={showNotification}>Show Notification</button>
      <ToastContainer />
    </div>
  );
}

自定义通知组件

如果需要更灵活的控制，可以自定义通知组件。通常需要管理一个通知队列，并通过状态控制通知的显示和隐藏。

示例代码：

import React, { useState } from 'react';

const Notification = ({ message, type }) => {
  const style = {
    background: type === 'success' ? 'green' : 'red',
    color: 'white',
    padding: '10px',
    margin: '10px 0',
  };

  return <div style={style}>{message}</div>;
};

function App() {
  const [notifications, setNotifications] = useState([]);

  const addNotification = (message, type) => {
    setNotifications([...notifications, { message, type }]);
    setTimeout(() => {
      setNotifications(notifications.slice(1));
    }, 3000);
  };

  return (
    <div>
      <button onClick={() => addNotification('Success!', 'success')}>
        Show Success
      </button>
      <button onClick={() => addNotification('Error!', 'error')}>
        Show Error
      </button>
      {notifications.map((notification, index) => (
        <Notification
          key={index}
          message={notification.message}
          type={notification.type}
        />
      ))}
    </div>
  );
}

使用 Context API 全局管理通知

对于大型应用，可以通过 Context API 全局管理通知状态，使任何组件都能触发通知。

React如何实现通知

示例代码：

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

const NotificationContext = createContext();

export const NotificationProvider = ({ children }) => {
  const [notifications, setNotifications] = useState([]);

  const addNotification = (message, type) => {
    setNotifications([...notifications, { message, type }]);
    setTimeout(() => {
      setNotifications(notifications.slice(1));
    }, 3000);
  };

  return (
    <NotificationContext.Provider value={{ addNotification }}>
      {children}
      <div className="notifications">
        {notifications.map((notification, index) => (
          <div key={index} className={`notification ${notification.type}`}>
            {notification.message}
          </div>
        ))}
      </div>
    </NotificationContext.Provider>
  );
};

export const useNotification = () => {
  return useContext(NotificationContext);
};

结合 Redux 管理通知状态

如果应用使用 Redux，可以通过 Redux 管理通知状态，确保通知逻辑与组件解耦。

示例代码：

// notificationSlice.js
import { createSlice } from '@reduxjs/toolkit';

const notificationSlice = createSlice({
  name: 'notification',
  initialState: [],
  reducers: {
    addNotification: (state, action) => {
      state.push(action.payload);
    },
    removeNotification: (state) => {
      state.shift();
    },
  },
});

export const { addNotification, removeNotification } = notificationSlice.actions;
export default notificationSlice.reducer;

// App.js
import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { addNotification, removeNotification } from './notificationSlice';

function App() {
  const dispatch = useDispatch();
  const notifications = useSelector((state) => state.notification);

  const showNotification = (message, type) => {
    dispatch(addNotification({ message, type }));
    setTimeout(() => {
      dispatch(removeNotification());
    }, 3000);
  };

  return (
    <div>
      <button onClick={() => showNotification('Hello!', 'success')}>
        Show Notification
      </button>
      <div className="notifications">
        {notifications.map((notification, index) => (
          <div key={index} className={`notification ${notification.type}`}>
            {notification.message}
          </div>
        ))}
      </div>
    </div>
  );
}