React中如何让滚动父元素滚动到关联组件位置？

我有一个Items列表：

const items = [{id: 1, linked_id: 5}, {id: 2, linked_id: 1}, {id: 3, linked_id: 5}, {id: 4, linked_id: 1}, {id: 5, linked_id: 1}];

渲染方式如下：

<div style="max-height: 150px; overflow: auto;">
  <ul>
    {items.map((item) => <Item key={item.id} {...item}/>)}
  </ul>
</div>

Item组件代码：

const Item = ({id, linked_id}) => {
  const handleClick = () => {
     // ???
  }

  return (<li>
    <button onClick={handleClick}>[Scroll to: {linked_id}]</button>
  </li>)
}

点击Item内的按钮时，需要让带有overflow: auto的父div滚动到对应的关联Item组件。不想给每个Item传递父div引用，觉得太繁琐，求优雅解决方案。

方法一：ID选择器 + scrollIntoView（最简单直接） #

给每个Item的<li>设置唯一ID，点击按钮时通过ID找到目标元素，调用scrollIntoView即可自动让目标元素滚动到其滚动容器的可视区域，完全不需要传递父容器引用。

修改后的Item组件：

const Item = ({id, linked_id}) => {
  const handleClick = () => {
    const targetElement = document.getElementById(`item-${linked_id}`);
    if (targetElement) {
      // 平滑滚动到目标元素顶部，behavior设为'auto'则无动画
      targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  }

  return (<li id={`item-${id}`}>
    <button onClick={handleClick}>[Scroll to: {linked_id}]</button>
  </li>)
}

这个方案代码量最少，无需额外状态或上下文，适合大多数场景。

方法二：React上下文(Context)传递滚动容器引用（更符合React数据流） #

如果不想依赖DOM选择器，可通过Context统一传递滚动容器的引用，避免逐个组件传props的繁琐。

1. 先创建ScrollContext：

import { createContext, useContext, useRef } from 'react';

const ScrollContext = createContext(null);

export const ScrollProvider = ({ children }) => {
  const scrollContainerRef = useRef(null);
  return (
    <ScrollContext.Provider value={scrollContainerRef}>
      <div ref={scrollContainerRef} style="max-height: 150px; overflow: auto;">
        {children}
      </div>
    </ScrollContext.Provider>
  );
};

export const useScrollContext = () => useContext(ScrollContext);

2. 修改列表渲染逻辑，用ScrollProvider包裹：

<ScrollProvider>
  <ul>
    {items.map((item) => <Item key={item.id} {...item}/>)}
  </ul>
</ScrollProvider>

3. 改造Item组件，结合ID和容器引用实现精准滚动：

import { useScrollContext } from './ScrollContext';

const Item = ({id, linked_id}) => {
  const scrollContainerRef = useScrollContext();

  const handleClick = () => {
    const targetElement = document.getElementById(`item-${linked_id}`);
    if (targetElement && scrollContainerRef.current) {
      const container = scrollContainerRef.current;
      // 计算目标元素相对于容器的偏移量
      const targetOffsetTop = targetElement.offsetTop - container.offsetTop;
      // 自定义滚动行为
      container.scrollTo({
        top: targetOffsetTop,
        behavior: 'smooth'
      });
    }
  }

  return (<li id={`item-${id}`}>
    <button onClick={handleClick}>[Scroll to: {linked_id}]</button>
  </li>)
}

这个方案更适合复杂场景，比如需要对滚动位置做精细调整、或容器结构有多层嵌套的情况。

方法三：自定义Hook封装滚动逻辑（复用性更强） #

把滚动逻辑封装成自定义Hook，让组件和滚动逻辑解耦，方便在多个组件中复用。

1. 封装Hook：

import { useCallback } from 'react';

export const useScrollToItem = () => {
  return useCallback((targetId) => {
    const targetElement = document.getElementById(`item-${targetId}`);
    if (targetElement) {
      targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  }, []);
};

2. 在Item组件中使用：

const Item = ({id, linked_id}) => {
  const scrollToItem = useScrollToItem();

  const handleClick = () => {
    scrollToItem(linked_id);
  }

  return (<li id={`item-${id}`}>
    <button onClick={handleClick}>[Scroll to: {linked_id}]</button>
  </li>)
}

这种方式让代码更整洁，滚动逻辑的修改只需要在Hook中进行，维护成本更低。

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