如何通过React Button组件实现点击后页面滚动到指定内容区域

实现核心是通过useRef钩子获取目标组件对应的DOM节点位置，再调用滚动API即可，具体修改步骤如下：

• 从react中引入useRef钩子，若你要滚动到的PageContent是自定义组件，还需要用到forwardRef做ref透传
• 在App组件内创建ref实例，绑定到PageContent组件上
• 修改滚动触发函数，通过ref获取目标元素的位置，执行滚动操作，可配置平滑滚动效果提升体验

完整实现代码 #

基础场景（PageContent支持ref接收） #

import { useRef } from 'react';
import Button from '@material-ui/core/Button';

function App() {
  const style = useStyles();
  // 创建ref绑定到目标组件
  const pageContentRef = useRef(null);

  function scrollDownPage(){
    // 拿到目标元素距离页面顶部的距离，执行滚动
    window.scrollTo({
      top: pageContentRef.current.offsetTop,
      behavior: 'smooth' // 可选配置，加上后为平滑滚动效果
    });
  }

  return(
    <>
      <Button onClick={scrollDownPage}>
        滚动到内容区
      </Button>
      {/* 给PageContent绑定ref */}
      <PageContent ref={pageContentRef}/>
    </>
  )
}

自定义PageContent组件的适配 #

如果PageContent是你自行封装的函数组件，默认无法直接接收ref，需要用forwardRef包裹改造：

// PageContent组件改造示例
import { forwardRef } from 'react';

const PageContent = forwardRef((props, ref) => {
  return (
    // 把透传的ref绑定到组件根DOM节点上
    <div ref={ref}>
      {/* 原有组件内容 */}
    </div>
  )
})

export default PageContent;

forwardRef的作用是把父组件传递的ref透传到子组件内部的DOM节点上，这样父组件就能拿到子组件对应的真实DOM位置，完成滚动定位。如果是滚动指定容器而非整个窗口，把window.scrollTo替换为对应容器的scrollTo方法即可，逻辑完全一致。

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