React实现按钮6秒后显示问题求助：setTimeout及类应用失效

你的代码存在几个核心问题，导致按钮延迟显示的效果无法生效：

1. 错误调用setTimeout回调：setTimeout(buttonStyle(), 6000)是直接执行了buttonStyle()函数，而非将函数作为参数传递，这会导致函数立刻执行，完全没有延迟效果。
2. 未使用React状态控制渲染：React组件的更新依赖状态变化，你直接在getButtonClasses里返回类名，但这个函数不会触发组件重新渲染，就算延迟执行了函数，页面也不会同步更新。
3. 初始类名缺失：没有给按钮设置初始的hide类，导致按钮一开始就处于显示状态。
4. CSS语法错误：3.6 * 10px这类乘法写法在CSS中无效，必须直接写具体像素值。

正确实现代码 #

import { useState, useEffect } from 'react';

function YourComponent() {
  // 用状态控制按钮可见性，初始为隐藏
  const [isButtonVisible, setIsButtonVisible] = useState(false);

  useEffect(() => {
    // 组件挂载后，6秒后切换可见状态
    const timer = setTimeout(() => {
      setIsButtonVisible(true);
    }, 6000);

    // 清理定时器，避免内存泄漏
    return () => clearTimeout(timer);
  }, []);

  // 根据状态动态拼接类名
  const buttonClasses = `btnn btnn-primary ${!isButtonVisible ? 'hide' : ''}`;

  return (
    <button className={buttonClasses}>Got it. Let's proceed</button>
  );
}

修复后的CSS #

.btnn {
    line-height: 36px; /* 修复乘法运算写法 */
    text-align: center;
    white-space: nowrap;
    font-weight: 500;
    border-radius: 4px;
    border: 0;
    display: inline-block;
    text-decoration: none;
    padding-top: 3px; /* 修复乘法运算写法 */
    padding-bottom: 3px;
    margin: 10px 0; /* 修复乘法运算写法 */
    width: 230px;
    margin-top: 20px; /* 修复乘法运算写法 */
    margin-bottom: 20px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bolder;
  }

.btnn-primary {
    background: #5567e7;
    color: var(--color-headings);
 }

.hide {
    display: none;
}

关键修改说明 #

• 用useState管理状态：只有状态变化时，React才会触发组件重新渲染，从而更新按钮的显示状态。
• useEffect执行延迟逻辑：在组件首次挂载后设置定时器，6秒后更新可见状态，同时清理定时器避免内存泄漏。
• 动态拼接类名：根据状态判断是否添加hide类，实现初始隐藏、延迟显示的效果。
• 修复CSS语法：将无效的乘法运算改为具体像素值，确保样式生效。

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