如何在 React 上为我的自定义吐司设置超时?

这个想法很简单:在执行 showToast 函数时,我想将我的 toast 的 className 设置为 show,然后将其替换为空字符串以在显示 3 秒后将其隐藏。

HTML:

<div id="toast">New color button added</div>

JS:

const showToast = () => {
    const toast = document.getElementById('toast');
    toast.className = 'show';
    setTimeout(() => {
        toast.className = toast.className.replace('show', '');
    }, 3000);
};

我正在尝试将其转换为 React 组件:

import React, { useState } from 'react';

const Toast = () => {
    const [isShown, setIsShown] = useState(true);

    setTimeout(() => {
        setIsShown(!isShown);
    }, 3000);

    return (
        <div className={isShown ? 'show' : undefined}>New color button added</div>
    );
};

export default Toast;

然后当我需要展示它时,我将把它放在一个函数中:

<Toast />

但我不确定这是否正确。老实说,我不知道该怎么做。请帮忙。

stack overflow How to setTimeout for my custom toast on React?
原文答案

答案:

作者头像

您需要将超时放在 useEffect 中才能正确执行