React中动态管理多个Ref并实现高效滚动定位

import React, { useRef } from 'react';

function MyComponentWithManyRefs({ indexToScroll }) {
  const ref0 = useRef();
  const ref1 = useRef();
  const ref2 = useRef();
  const ref3 = useRef();
  const ref4 = useRef();

  // 假设在某个事件或useEffect中触发滚动
  const scrollToElement = () => {
    switch(indexToScroll) {
      case 0:
        ref0.current?.scrollIntoView();
        break;
      case 1:
        ref1.current?.scrollIntoView();
        break;
      case 2:
        ref2.current?.scrollIntoView();
        break;
      case 3:
        ref3.current?.scrollIntoView();
        break;
      case 4:
        ref4.current?.scrollIntoView();
        break;
      default:
        break;
    }
  };

  return (
    <div>
      <div ref={ref0}>Element 0</div>
      <div ref={ref1}>Element 1</div>
      <div ref={ref2}>Element 2</div>
      <div ref={ref3}>Element 3</div>
      <div ref={ref4}>Element 4</div>
      <button onClick={scrollToElement}>Scroll to Index {indexToScroll}</button>
    </div>
  );
}

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

function DynamicRefScrollExample() {
    // 1. 使用useRef创建一个可变容器，用于存储Ref数组
    const itemRefs = useRef([]);

    // 2. 在组件挂载或渲染时，动态生成Ref对象并填充到itemRefs.current数组中
    // 确保每次渲染时，itemRefs.current都被正确地更新为新的Ref数组
    // 这里的长度为10，表示有10个可滚动元素
    itemRefs.current = Array.from({ length: 10 }).map(
        (_, i) => itemRefs.current[i] ?? createRef() // 优化：如果Ref已存在则复用，否则创建新的
    );

    // 假设我们想要在组件首次渲染后滚动到索引为5的元素
    useEffect(() => {
        const indexOfRefToScroll = 5;
        // 3. 通过索引访问Ref并执行DOM操作
        if (itemRefs.current[indexOfRefToScroll] && itemRefs.current[indexOfRefToScroll].current) {
            itemRefs.current[indexOfRefToScroll].current.scrollIntoView({
                behavior: 'smooth', // 平滑滚动
                block: 'start'      // 滚动到元素的顶部
            });
        }
    }, []); // 空依赖数组确保只在组件挂载时执行一次

    // 4. 渲染元素并绑定Ref
    return (
        <div style={{ height: '300px', overflowY: 'scroll', border: '1px solid #ccc' }}>
            <p>这是一个可滚动的容器，包含10个元素。</p>
            {Array.from({ length: 10 }).map((_, index) => (
                <div
                    ref={itemRefs.current[index]} // 绑定对应的Ref
                    key={index}
                    style={{
                        height: '100px',
                        lineHeight: '100px',
                        textAlign: 'center',
                        backgroundColor: index === 5 ? '#e0f7fa' : (index % 2 === 0 ? '#f0f0f0' : '#ffffff'),
                        borderBottom: '1px solid #eee',
                        fontWeight: index === 5 ? 'bold' : 'normal'
                    }}
                >
                    Element {index}
                </div>
            ))}
            <p>滚动结束后，索引为5的元素会被高亮。</p>
        </div>
    );
}

export default DynamicRefScrollExample;