React中如何按秒级间隔切换state实现男女图标自动轮播效果

你猜测的使用useEffect的思路是正确的，配合setInterval定时器即可实现定时切换的效果，完整实现代码如下：

import { useState, useEffect } from 'react';

function AuthButton() {
  const [icon, setIcon] = useState('male');

  useEffect(() => {
    // 2.5秒切换一次，可根据需求在2000-3000毫秒范围内调整
    const toggleTimer = setInterval(() => {
      // 函数式更新避免闭包问题
      setIcon(prevIcon => prevIcon === 'male' ? 'female' : 'male');
    }, 2500);

    // 组件卸载时清除定时器，避免内存泄漏
    return () => clearInterval(toggleTimer);
  }, []); // 空依赖保证仅在组件首次挂载时初始化定时器

  return (
    <button>
      {icon === 'male' ? <MaleSvg /> : <FemaleSvg />}
      {/* 按钮其他内容 */}
    </button>
  );
}

可选优化 #

如果想要切换效果更柔和，可以给图标添加CSS过渡效果：

.gender-icon {
  transition: opacity 0.3s ease-in-out;
}

给<MaleSvg/>和<FemaleSvg/>添加上gender-icon类名即可实现淡入淡出的切换动画。

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