React中Dropdown选中项滚动到对应Ref元素的实现方法

1. 重构Ref管理逻辑 #

原代码用数组存储Ref，查找对应ID的元素需要遍历，效率较低。建议改成以元素ID为key的对象存储Ref，这样可以直接通过ID定位到目标元素，更高效。

2. 实现下拉选择与滚动逻辑 #

添加下拉选择组件，绑定选中事件，在事件回调中根据选中的ID找到对应的Ref元素，调用scrollIntoView()方法完成滚动，还可以配置平滑滚动的行为。

完整代码示例 #

import { useRef, useState } from 'react';

const SettingView = () => {
    // 用对象存储Ref，key为元素的id
    const refs = useRef<Record<string, HTMLDivElement | null>>({});
    // 下拉选中的ID，初始值可根据需求设置
    const [selectedId, setSelectedId] = useState("el2");

    // 绑定Ref的方法，将元素按ID存入refs对象
    const setRef = (el: HTMLDivElement | null, id: string) => {
        if (el) {
            refs.current[id] = el;
        }
    };

    // 下拉选中事件处理函数
    const handleSelectChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
        const id = e.target.value;
        setSelectedId(id);
        // 找到对应Ref元素并滚动
        const targetEl = refs.current[id];
        if (targetEl) {
            // 配置滚动行为，可选smooth实现平滑滚动
            targetEl.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }
    };

    return (
        <>
            {/* 下拉选择组件 */}
            <select value={selectedId} onChange={handleSelectChange}>
                {sortedRows.map(item => (
                    <option key={item.some.name} value={item.some.name}>
                        {item.text}
                    </option>
                ))}
            </select>

            {/* 渲染所有div元素，绑定Ref */}
            {sortedRows.map(item => (
                <div
                    key={item.some.name}
                    ref={(el) => setRef(el, item.some.name)}
                    id={item.some.name}
                >
                    {item.text}
                </div>
            ))}
        </>
    );
};

export default SettingView;

关键说明 #

• Ref存储优化：用Record<string, HTMLDivElement | null>类型的对象存储Ref，直接通过ID索引，避免数组遍历的开销。
• 滚动配置：scrollIntoView的配置项behavior: 'smooth'实现平滑滚动，block: 'start'确保元素顶部对齐视口（可选值还有center、end）。
• JSX渲染修正：原代码中直接在return里写for循环是错误的，React要求用map返回JSX元素数组，同时要给每个元素加唯一key。

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