React.js提示框：如何实现2秒后自动消失？

要实现提示框2秒后自动关闭，只需在组件中添加监听mostrar状态的useEffect，当提示框显示时启动定时器，到期后调用关闭函数即可，同时要清理定时器避免内存泄漏。

修改后的完整代码如下：

import { useEffect, useState } from "react"
import { FaCheck, FaExclamationTriangle, FaInfo } from "react-icons/fa"
import { HiX } from "react-icons/hi"
import "./css/alerta.css"

function Alerta({ tipo, mostrar, mensagem, fecharAlerta }) {
    const [cor, setCor] = useState()

    useEffect(() => {
        if (tipo === "sucesso") {
            setCor("rgb(74, 112, 74)")
        } else if (tipo === "erro") {
            setCor("rgb(138, 67, 67)")
        } else if (tipo === "info") {
            setCor("rgb(185, 184, 93)")
        }
    }, [tipo])

    useEffect(() => {
        let timer;
        if (mostrar) {
            // 2秒后自动关闭提示框
            timer = setTimeout(() => {
                fecharAlerta();
            }, 2000);
        }
        // 组件卸载或mostrar变化时清理定时器
        return () => clearTimeout(timer);
    }, [mostrar, fecharAlerta])

    if (!mostrar) return null;

    return (
        <div className="alerta" style={{ backgroundColor: cor }}>
            {tipo === "sucesso" && <FaCheck className="icon" />}
            {tipo === "erro" && <FaExclamationTriangle className="icon" />}
            {tipo === "info" && <FaInfo className="icon" />}
            <span className="titulo">{mensagem}</span>
            <div>
                <button className="fechar-btn" onClick={fecharAlerta}>
                    <HiX />
                </button>
            </div>
        </div>
    )
}

export default Alerta

关键修改说明 #

• 新增useEffect，依赖mostrar和fecharAlerta，确保提示框显示时触发定时器
• 通过setTimeout在2秒后调用fecharAlerta关闭提示框
• 返回清理函数clearTimeout(timer)，避免组件卸载或状态变化时定时器残留，防止内存泄漏
• 将原有的多条件判断优化为else if，精简代码逻辑

内容的提问来源于stack exchange，提问作者Tomás Moreira