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

[shfshanyue]

No description provided.

[HXML]

这个没人回答的吗

[stillsailing]

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
}