使用 react 实现一个通用的 message 组件

import * as React from "react";
import { createRoot } from "react-dom/client";
 
const root = createRoot(getRootDOM());
let timer: NodeJS.Timeout;
 
interface ToastOpts {
  message: string;
  duration?: number;
}
 
export default function showToast(options: ToastOpts) {
  const { message, duration = 3000 } = options;
  const $Toast = (
    <div className="toast toast-top toast-center">
      <span>{message}</span>
    </div>
  );
  root.render($Toast);
  clearTimeout(timer);
  timer = setTimeout(() => root.render(null), duration);
}
 
function getRootDOM() {
  const rootId = "notification-root";
  let root: HTMLElement = window[rootId] || document.getElementById(rootId);
  if (!root) {
    root = document.createElement("div");
    root.id = rootId;
    document.body.appendChild(root);
    window[rootId] = root;
  }
  return root;
}

import React, { useEffect } from 'react';
import './Message.css'; // 引入样式文件

const Message = ({ message, type, duration = 3000, onClose }) => {
  useEffect(() => {
    const timer = setTimeout(() => {
      if (onClose) {
        onClose();
      }
    }, duration);

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

  return (
    <div className={`message ${type}`}>
      {message}
      <button className="close-button" onClick={onClose}>×</button>
    </div>
  );
};

export default Message;