React中动态管理多个Ref并实现精确滚动的高效策略

import React, { useRef } from 'react';

function MyComponent() {
  const ref0 = useRef();
  const ref1 = useRef();
  const ref2 = useRef();
  const ref3 = useRef();
  const ref4 = useRef();

  const scrollToElement = (index) => {
    switch(index) {
      case 0:
        ref0.current?.scrollIntoView({ behavior: 'smooth' });
        break;
      case 1:
        ref1.current?.scrollIntoView({ behavior: 'smooth' });
        break;
      case 2:
        ref2.current?.scrollIntoView({ behavior: 'smooth' });
        break;
      case 3:
        ref3.current?.scrollIntoView({ behavior: 'smooth' });
        break;
      case 4:
        ref4.current?.scrollIntoView({ behavior: 'smooth' });
        break;
      default: 
        break;
    }
  };

  // ... 渲染部分
  return (
    <div>
      <div ref={ref0}>元素 0</div>
      <div ref={ref1}>元素 1</div>
      <div ref={ref2}>元素 2</div>
      <div ref={ref3}>元素 3</div>
      <div ref={ref4}>元素 4</div>
      <button onClick={() => scrollToElement(2)}>滚动到元素 2</button>
    </div>
  );
}

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

// 定义需要渲染的元素数量
const ITEM_COUNT = 5;

export default function ScrollableList() {
    // 1. 使用 useRef 创建一个可变的容器，其 current 属性将持有一个 Ref 对象的数组。
    // 我们在这里初始化 refs.current 为一个空数组，并在每次渲染时确保它包含正确数量的 ref 对象。
    // 使用 `refs.current[i] || createRef()` 可以确保如果 ref 已经存在，则重用它，
    // 否则创建一个新的 ref，这有助于在组件重新渲染时保持 ref 的稳定性。
    const refs = useRef([]);
    refs.current = Array.from({ length: ITEM_COUNT }).map((_, i) => refs.current[i] || createRef());

    // 2. 使用 useEffect 在组件挂载后执行滚动操作，或响应其他事件。
    // 这里的示例是在组件首次渲染后滚动到特定元素。
    useEffect(() => {
        const indexOfTargetElement = 2; // 假设我们想滚动到第三个元素 (索引为 2)

        // 检查目标 Ref 和其 current 属性是否存在，以避免在元素未挂载时报错
        if (refs.current[indexOfTargetElement] && refs.current[indexOfTargetElement].current) {
            refs.current[indexOfTargetElement].current.scrollIntoView({
                behavior: 'smooth', // 平滑滚动效果
                block: 'start',     // 将元素的顶部与可滚动区域的顶部对齐
            });
        }
    }, []); // 空依赖数组表示此 effect 只在组件挂载后运行一次

    // 3. 渲染元素，并将 Ref 绑定到对应的 DOM 元素上。
    return (
        <div style={{ height: '400px', overflowY: 'scroll', border: '1px solid #ddd' }}>
            <h2>滚动到特定元素示例</h2>
            {Array.from({ length: ITEM_COUNT }).map((_, index) => (
                <div
                    key={index}
                    // 将 Ref 数组中的对应 Ref 绑定到当前渲染的 div 元素
                    ref={refs.current[index]}
                    style={{
                        height: '150px', // 每个元素的高度，确保有足够的滚动空间
                        borderBottom: '1px dashed #ccc',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        backgroundColor: index % 2 === 0 ? '#f9f9f9' : '#eef',
                        fontSize: '1.2em',
                        padding: '10px'
                    }}
                >
                    这是元素 {index}
                </div>
            ))}
            <button onClick={() => {
                const randomIndex = Math.floor(Math.random() * ITEM_COUNT);
                if (refs.current[randomIndex] && refs.current[randomIndex].current) {
                    refs.current[randomIndex].current.scrollIntoView({ behavior: 'smooth' });
                }
            }} style={{ marginTop: '20px', padding: '10px 20px' }}>
                随机滚动到某个元素
            </button>
        </div>
    );
}