React中使用Tailwind CSS实现点击按钮后2秒自动隐藏Snackbar组件的方法

• 回调未执行：setTimeout中定义的回调为() => snackbarClose，仅返回了关闭函数的引用未实际执行，自动关闭逻辑完全不生效
• 定时器不受控：直接在组件渲染分支中定义setTimeout，只要snackbar为true时组件重渲染就会生成新的定时器，没有配套的清理逻辑，会引发内存泄漏、多次触发关闭的异常问题

import { useEffect } from 'react';

const SnackbarResult = ({
  snackbar,
  snackbarClose,
  suggestResponse,
}: ISnackbarProps) => {
  useEffect(() => {
    let closeTimer: NodeJS.Timeout;
    // 仅当snackbar切换为打开状态时，生成自动关闭定时器
    if (snackbar) {
      closeTimer = setTimeout(() => {
        snackbarClose();
      }, 2000);
    }
    // 组件卸载、依赖变更时清除定时器，避免副作用残留
    return () => clearTimeout(closeTimer);
  }, [snackbar, snackbarClose]);

  if (!snackbar) return null;

  return (
    <div className="bg-green-500 fixed right-2 bottom-1 font-medium p-2 md:p-5">
      {suggestResponse.message}
    </div>
  );
};

• 可添加Tailwind过渡类实现显隐动画，比如给外层div追加transition-opacity duration-300属性，配合状态控制透明度实现平滑弹出/收起效果
• 可新增手动关闭按钮，给用户主动关闭提示的操作入口

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