如何使用React滚动到行列表中的一行？

import React, { useRef, useEffect } from 'react';

const RowList = () => {
  const containerRef = useRef(null);

  useEffect(() => {
    const handleScroll = () => {
      const container = containerRef.current;
      const containerRect = container.getBoundingClientRect();
      const scrollTop = container.scrollTop;

      // 计算目标行的位置信息
      const targetRowIndex = 5; // 假设目标行的索引为5
      const targetRow = container.children[targetRowIndex];
      const targetRowRect = targetRow.getBoundingClientRect();

      // 判断目标行是否在可视区域内
      if (
        targetRowRect.top < containerRect.top ||
        targetRowRect.bottom > containerRect.bottom
      ) {
        // 将目标行滚动到可视区域
        targetRow.scrollIntoView({ behavior: 'smooth' });
      }
    };

    const container = containerRef.current;
    container.addEventListener('scroll', handleScroll);

    return () => {
      container.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return (
    <div ref={containerRef} style={{ height: '300px', overflow: 'auto' }}>
      {/* 行列表 */}
      {/* ... */}
    </div>
  );
};

export default RowList;