React中Bootstrap Toast显隐时控制Footer显示隐藏的实现方法

要实现「Toast打开时显示Footer，Toast消失几秒后Footer隐藏」的效果，你可以通过React的useState维护本地状态，配合useEffect监听Redux中Toast状态的变化并添加延迟逻辑，具体步骤如下：

1. 引入React的useState和useEffect钩子
2. 定义本地状态控制Footer的显示/隐藏
3. 监听Redux中toast.open的变化，根据状态切换添加延迟逻辑

修改后的完整代码示例 #

import { useState, useEffect } from 'react';
// 其他必要的导入（Link、ChevronLeft等）

// 组件内部
const [showFooter, setShowFooter] = useState(toast.open);

useEffect(() => {
  let timer;
  if (toast.open) {
    // Toast打开时立即显示Footer
    setShowFooter(true);
  } else {
    // Toast关闭后，延迟3秒隐藏Footer（可自行调整延迟时间）
    timer = setTimeout(() => {
      setShowFooter(false);
    }, 3000);
  }
  // 清理定时器，避免内存泄漏
  return () => clearTimeout(timer);
}, [toast.open]);

return (
  <>
    <Toast toastStore={toast} showToast={() => toast.open} />

    {showFooter ? (
      <footer className="footer sticky-bottom bg-white d-flex align-items-center w-100">
        <div className={`row ${styles.footerRow}`}>
          <div className="col-6 d-flex align-items-center justify-content-start">
            <Link to="/employees">
              <button
                className={`btn btn-outline-dark ${styles.backButtton}`}
              >
                <ChevronLeft />
                <span className="fw-bold fs-20">一覧に戻る</span>
              </button>
            </Link>
          </div>
          <div className="col-6 d-flex align-items-center justify-content-end">
            <button
              className={`btn btn-primary fw-bold fs-20 ${styles.registerButton}`}
              type="submit"
              onClick={handleForm}
            >
              登録
            </button>
          </div>
        </div>
      </footer>
    ) : null}
  </>
);

逻辑说明 #

• 用本地状态showFooter控制Footer的显示，避免直接依赖Redux的toast.open（因为它会即时变化）
• 当toast.open变为true（Toast打开），立即将showFooter设为true，显示Footer
• 当toast.open变为false（Toast关闭），启动定时器，延迟指定时间后将showFooter设为false，隐藏Footer
• 组件卸载或toast.open再次变化时，清理定时器，防止内存泄漏

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