Menyediakan Pemberitahuan Tersuai Toast dalam React dengan Jenis Tertentu dan API Konteks

Persediaan Konteks

src/context/ToastContext.js

import { createContext, useCallback, useContext, useEffect, useState } from "react";

const CreateAlertBox = createContext();

export const useCreateAlert = () => useContext(CreateAlertBox);

const AlertType = ['error', 'success', 'info', 'warning'];

export const CreateAlertBoxProvider = ({ children }) => {
    const [alert, setAlert] = useState([]);

    const createAlert = useCallback((message, type = 'warning') => {
        if (!AlertType.includes(type)) return;

        setAlert((prevAlert) => [
            ...prevAlert,
            { id: Date.now(), message, type }
        ])
    }, [])

    const removeAlert = useCallback((id) => {
        setAlert((prevAlert) => prevAlert.filter((alert) => alert.id !== id));
    }, [])
    return (
        <CreateAlertBox.Provider value={{ createAlert, removeAlert }}>
            {children}
            <div className="toast-container">
                {
                    alert.map((alert) => (
                        <div key={alert.id} className={`toast toast-${alert.type}`}>
                            {alert.message}
                            <button onClick={() => removeAlert(alert.id)}>X</button>
                        </div>
                    ))
                }
            </div>
        </CreateAlertBox.Provider>
    )
}

CSS untuk Pemberitahuan Roti Bakar

/* src/styles/toast.css */

.toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 9999;
}

.toast {
    background-color: #333;
    color: #fff;
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.toast-info {
    background-color: #007bff;
}

.toast-success {
    background-color: #28a745;
}

.toast-warning {
    background-color: #ffc107;
}

.toast-error {
    background-color: #dc3545;
}

.toast button {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    margin-left: 1rem;
}

Menyediakan Konteks Roti Bakar

// src/main.js

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import { RouterProvider } from 'react-router-dom'
import { router } from './router.jsx'
import { CreateAlertBoxProvider } from './context/toastcontext.jsx'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <CreateAlertBoxProvider>
        <RouterProvider router={router}>
          <App />
        </RouterProvider>
    </CreateAlertBoxProvider>
  </React.StrictMode>,
)

Menggunakan Konteks Roti Bakar dalam Komponen

import React, { useContext, useEffect } from 'react'
import { UserContext } from '../context/usercontext'
import { useCreateAlert } from '../context/toastcontext'

const Profile = () => {
    const { user } = useContext(UserContext)

    const { createAlert } = useCreateAlert();

    const showToast = () => {
        try {
            createAlert("Deal created successfully", 'success')

        } catch (error) {
            createAlert('This is an info toast!', 'error');
        }
    };


    return (
        <div className="App">
            <p>Hello Profile</p>
            <button onClick={showToast}>Show Toast</button>
        </div>
    )
}

export default Profile

Atas ialah kandungan terperinci Menyediakan Pemberitahuan Tersuai Toast dalam React dengan Jenis Tertentu dan API Konteks. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!