fix(react-vite): fix scrolling lyric causing error bug

Author: xianshenglu

demo/react-vite/src/components/player/PlayerLyric.tsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import { useEffect, useRef, type FC } from 'react'
 import classNames from 'classnames'
 import './PlayerLyric.module.less'
 import styles from './PlayerLyric.module.less'
@@ -11,42 +11,41 @@ interface PlayerLyricProps {
   toggleIsTouching(...args: unknown[]): unknown;
 }
 
-class PlayerLyric extends Component<PlayerLyricProps> {
-  constructor(props) {
-    super(props)
-    this.lyricsRef = []
-  }
-  componentDidUpdate() {
-    const { prevLyricIndex } = this.props
-    this.lyricsRef[prevLyricIndex] &&
-      this.lyricsRef[prevLyricIndex].current.scrollIntoView()
-  }
-  render() {
-    this.lyricsRef = []
-    const { lyrics, prevLyricIndex, toggleIsTouching } = this.props
-    return (
-      <div
-        className={styles.PlayerLyric}
-        onTouchStart={() => toggleIsTouching(true)}
-        onTouchEnd={() => toggleIsTouching(false)}
-      >
-        {lyrics.map((lyric, index) => {
-          const lyricRef = React.createRef()
-          this.lyricsRef.push(lyricRef)
-          return (
-            <p
-              key={index}
-              ref={lyricRef}
-              className={classNames(styles.PlayerLyric_text, {
-                [styles['PlayerLyric_text--active']]: index === prevLyricIndex + 1
-              })}
-            >
-              {lyric.text}
-            </p>
-          )
-        })}
-      </div>
-    )
+const PlayerLyric: FC<PlayerLyricProps> = ({ lyrics, prevLyricIndex, toggleIsTouching }) => {
+  const lyricElementsRef = useRef<(HTMLParagraphElement | null)[]>([]);
+  const setLyricElement = (
+    index: number,
+    element: HTMLParagraphElement | null
+  ) => {
+    lyricElementsRef.current[index] = element
+    return () => {
+      lyricElementsRef.current.splice(index, 1)
+    }
   }
+  useEffect(() => {
+      lyricElementsRef.current[prevLyricIndex]?.scrollIntoView();
+  }, [prevLyricIndex]);
+
+  return (
+    <div
+      className={styles.PlayerLyric}
+      onTouchStart={() => toggleIsTouching(true)}
+      onTouchEnd={() => toggleIsTouching(false)}
+    >
+      {lyrics.map((lyric, index) => {
+        return (
+          <p
+            key={index}
+            ref={el=>setLyricElement(index, el)}
+            className={classNames(styles.PlayerLyric_text, {
+              [styles['PlayerLyric_text--active']]: index === prevLyricIndex + 1
+            })}
+          >
+            {lyric.text}
+          </p>
+        )
+      })}
+    </div>
+  )
 }
 export default PlayerLyric