React JSX中点击按钮滚动到指定组件的实现问题咨询

• 你使用的字符串ref="Somewhere"写法是React早已废弃的API，新版本React（16.3及以后）无法通过这种方式获取到真实DOM节点，自然没法触发滚动。
• 自定义组件默认接收的ref会挂载到组件实例上，而非组件内部的根DOM元素，直接对自定义组件的ref调用滚动方法会因为拿到的不是DOM节点而失效。
• 部分第三方滚动库需要配合特定的容器配置，未给滚动父容器设置overflow: auto/scroll属性时，滚动逻辑也不会生效。

核心逻辑是用useRef获取目标DOM节点的引用，再调用原生scrollIntoView方法实现滚动，不需要引入额外第三方库。

基础实现示例 #

如果目标位置可以用原生DOM包裹，直接把ref挂到原生DOM上即可：

import { useRef } from 'react';

const MyComponent = () => {
  // 声明存储目标DOM的ref
  const targetRef = useRef(null);

  const scrollSomewhere = () => {
    // 可选链避免ref未挂载时报错
    targetRef.current?.scrollIntoView({
      behavior: 'smooth', // 平滑滚动效果，不需要可以删掉这个参数
      block: 'start' // 滚动到目标元素顶部，可选值为center/end等
    });
  }

  return (
    <>
      <MyCustomButton onClick={scrollSomewhere}>点击我滚动</MyCustomButton>

      {/* 中间其他内容省略 */}

      {/* 把ref挂到原生div上 */}
      <div ref={targetRef}>
        <MyCustomComponent>我是目标位置</MyCustomComponent>
      </div>
    </>
  )
}

直接给自定义组件挂ref的写法 #

如果需要把ref直接挂到自定义组件上，需要对自定义组件做ref转发处理：

// MyCustomComponent.jsx 组件定义
import { forwardRef } from 'react';

// 用forwardRef包裹组件，接收外部传入的ref
const MyCustomComponent = forwardRef((props, ref) => {
  return (
    // 把ref挂到组件内部的根DOM节点上
    <div ref={ref} className="custom-component">
      {props.children}
    </div>
  )
})

export default MyCustomComponent;

处理完自定义组件后，就可以直接把ref挂到组件标签上：

<MyCustomComponent ref={targetRef}>我是目标位置</MyCustomComponent>

• 确保触发滚动逻辑时，目标组件已经完成渲染，ref.current不为null：如果目标组件是条件渲染的，需要等组件渲染完成后再触发滚动。
• 如果是在指定容器内滚动而非全局页面滚动，需要给滚动的父容器设置overflow: auto或overflow: scroll属性。

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