如何在React.js中实现组件数秒后隐藏，Ant Design Alert 5秒自动关闭方法

你可以通过React内置钩子实现自动关闭逻辑，完整修改后的代码如下：

import React, { useEffect, useRef } from 'react';
import { Alert } from 'antd';

export default function CustomAlert (props) {
    // 存储定时器ID，跨渲染周期保持引用
    const timerRef = useRef(null);

    useEffect(() => {
        // 当Alert显示时启动倒计时
        if (props.visible) {
            timerRef.current = setTimeout(() => {
                // 调用父组件传入的关闭方法，修改visible状态
                props.handleClose?.();
            }, 5000) // 5000毫秒即5秒
        }

        // 清理函数：visible变化、组件卸载时清除定时器，避免内存泄漏
        return () => {
            if (timerRef.current) {
                clearTimeout(timerRef.current);
                timerRef.current = null;
            }
        }
    }, [props.visible, props.handleClose])

    return (
        <React.Fragment>
            {
                props.visible ?
                    <Alert 
                        message={props.message} 
                        style={{textAlign: 'right', direction: 'rtl' , position: 'fixed', width:'100%', zIndex:'100'}} 
                        closable 
                        afterClose={props.handleClose}
                    />
                    :
                    null
            }
        </React.Fragment>
    )
}

核心说明 #

• 定时器逻辑只在props.visible为true时触发，每次显示Alert都会重新计时
• 用useRef存储定时器ID，避免组件重渲染导致ID丢失，清理时可以精准定位要销毁的定时器
• 依赖项添加了props.handleClose，保证回调方法更新时逻辑不会出错

注意事项 #

请确保父组件传入的handleClose方法会正确修改控制CustomAlert显隐的visible状态，否则自动关闭逻辑不会生效。如果需要灵活调整倒计时时长，可以新增自定义props参数，比如设置autoCloseDelay默认值为5000，使用时按需传入毫秒数即可。

内容的提问来源于stack exchange，提问作者Aidayg24