React useEffect实现文本渲染后动画异常问题解决方案

你遇到的白屏、内容不渲染问题由3处代码错误共同导致，按以下步骤修复即可： #

1. 修正useEffect的错误返回值 #

useEffect的回调函数只能返回undefined或者清理函数，你当前直接将setTimeout的返回值（数字类型的定时器ID）作为返回值返回，React18开发环境严格模式下会检测到非法返回值抛出运行时错误，导致整个应用白屏，只剩外层背景。
将原useEffect代码：

useEffect(() => {
    return setTimeout(() => {setLetterClass('text-animate-hover')}, 4000)}, [])

替换为正确写法，同时增加定时器清理逻辑避免内存泄漏：

useEffect(() => {
    const timer = setTimeout(() => {
        setLetterClass('text-animate-hover')
    }, 4000)
    // 组件卸载时清除定时器
    return () => clearTimeout(timer)
}, [])

2. 修正父子组件传参的命名不匹配问题 #

父组件Home.js向子组件AnimatedLetters传递props时，参数名和子组件内解构接收的参数名大小写、命名不一致，导致子组件接收到的动画类名、索引参数全部为undefined，生成的文本元素类名完全错误，动画失效。
将Home.js中两处AnimatedLetters组件的传参修改为和子组件接收名一致：

<AnimatedLetter 
  letterClass={LetterClass}
  strArray={nameArray}
  index={6} 
/>
<br />
<AnimatedLetter 
  letterClass={LetterClass}
  strArray={jobArray}
  index={14} 
/>

3. 修正样式问题并补充动画依赖 #

• 你代码中用到的bounceIn、rubberBand属于animate.css的预设动画，如果没有引入animate.css样式文件，会导致初始设置了opacity:0的文本元素因为动画不存在一直保持透明不可见。在项目入口文件（比如index.js）或者Home.js顶部引入样式即可：

import 'animate.css'

如果你是自定义实现动画关键帧，忽略这一步即可。

• AnimatedLetter.scss中.text-animate-hover的hover嵌套写法有误，SCSS中需要加&指代当前父选择器，否则hover效果不会绑定到文本元素本身，修改对应样式：

.text-animate-hover {
  min-width: 10px;
  display: inline-block;
  animation-fill-mode: both;

  &:hover {
    animation: rubberBand 1s;
    color: #ffd700;
  }
}

修复后页面首次加载时会按顺序触发逐字弹入动画，4秒后自动切换为hover类，鼠标悬停在文字上会触发摇摆变色效果，侧边栏、首页文本都会正常渲染。

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