在React中能否使用setTimeout延迟样式对象生效？

要实现点击切换按钮后延迟一段时间再改变导航栏高度，只需通过setTimeout延迟更新控制样式的状态，同时做好定时器清理避免内存泄漏，具体修改如下：

完整代码实现 #

import { useState, useCallback, useEffect } from 'react';

const Navbar = () => {
  const [navbarIsToggle, setNavbarIsToggle] = useState(false);
  let timerId = null; // 存储定时器ID，用于后续清理

  // 带延迟的切换逻辑
  const toggleNavbar = useCallback(() => {
    // 清除之前的定时器，防止多次点击触发重复延迟
    if (timerId) clearTimeout(timerId);
    
    // 设置延迟时长（示例为2000ms，可按需调整）
    timerId = setTimeout(() => {
      setNavbarIsToggle(prevState => !prevState);
    }, 2000);
  }, []);

  // 组件卸载时清理定时器，避免内存泄漏
  useEffect(() => {
    return () => {
      if (timerId) clearTimeout(timerId);
    };
  }, []);

  const openNavbar = {
    height: navbarIsToggle ? '100vh' : '0',
    // 可选：添加过渡动画让高度变化更自然
    transition: 'height 0.3s ease'
  };

  return (
    <>
      {/* 切换按钮 */}
      <button onClick={toggleNavbar}>切换导航栏</button>
      {/* 保留你原有导航栏结构 */}
      <nav className="navbar-body wrapper" style={{ ...openNavbar }}>
        {/* 导航内容 */}
      </nav>
    </>
  );
};

export default Navbar;

关键细节说明 #

• 延迟控制：通过setTimeout延迟修改navbarIsToggle状态，间接实现样式的延迟生效
• 定时器清理：每次点击按钮先清除之前的定时器，避免多次点击导致状态混乱；组件卸载时也清理定时器，防止内存泄漏
• 平滑过渡优化（可选）：如果希望高度变化不生硬，可给导航栏的CSS类添加过渡效果，同时必须设置overflow: hidden避免内容溢出：

  .navbar-body.wrapper {
    overflow: hidden;
    transition: height 0.3s ease;
  }
  

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