如何在react中5秒后自动关闭甜蜜警报

npm install react-toastify

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

render() {
  return (
    <div>
      <ToastContainer />
      {/* 其他组件内容 */}
    </div>
  );
}

toast.success('甜蜜警报', {
  autoClose: 5000, // 5秒后自动关闭
});

useEffect(() => {
  return () => {
    toast.dismiss(); // 清除警报信息
  };
}, []);

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

const SweetAlertComponent = () => {
  useEffect(() => {
    return () => {
      toast.dismiss(); // 清除警报信息
    };
  }, []);

  const handleSweetAlert = () => {
    toast.success('甜蜜警报', {
      autoClose: 5000, // 5秒后自动关闭
    });
  };

  return (
    <div>
      <button onClick={handleSweetAlert}>触发甜蜜警报</button>
      <ToastContainer />
    </div>
  );
};

export default SweetAlertComponent;