React点击Topmenu菜单滚动至SectionOne组件的实现疑问

我来帮你搞定这个滚动问题！你遇到的核心问题是React组件的Ref是内部私有状态，没法直接从Topmenu组件访问到SectionOne里的Ref。咱们可以通过父组件作为中间层传递Ref和滚动方法来解决，具体实现步骤如下：

第一步：在父页面组件中创建并传递Ref #

首先，在包含三个组件的父页面里，创建一个Ref指向SectionOne，同时定义滚动触发函数，再把这个函数传给Topmenu组件：

import React, { useRef } from 'react';
import Topmenu from './Topmenu';
import SectionOne from './SectionOne';
import SectionTwo from './SectionTwo';

const MainPage = () => {
  // 创建指向SectionOne的Ref
  const sectionOneRef = useRef(null);

  // 定义滚动到SectionOne的函数
  const scrollToSectionOne = () => {
    // 确保Ref存在后执行滚动，可选添加平滑滚动效果
    sectionOneRef.current?.scrollIntoView({
      behavior: 'smooth',
      block: 'start'
    });
  };

  return (
    <div>
      {/* 把滚动函数传给Topmenu */}
      <Topmenu onScrollToSection={scrollToSectionOne} />
      {/* 把Ref传给SectionOne */}
      <SectionOne ref={sectionOneRef} />
      <SectionTwo />
    </div>
  );
};

export default MainPage;

第二步：让SectionOne暴露Ref给父组件 #

因为函数组件默认不支持接收外部Ref，所以需要用forwardRef把组件的根元素Ref暴露出去：

import React, { forwardRef } from 'react';

// 使用forwardRef接收父组件传递的Ref，并绑定到根元素上
const SectionOne = forwardRef((props, ref) => {
  return (
    <div ref={ref} className="section-one-container">
      {/* 这里是SectionOne的内容 */}
      <h2>Section One 内容区域</h2>
      {/* ...其他组件内容 */}
    </div>
  );
});

export default SectionOne;

第三步：在Topmenu中调用滚动函数 #

最后，在Topmenu组件里，给对应的菜单项绑定点击事件，调用父组件传过来的滚动函数：

import React from 'react';

const Topmenu = ({ onScrollToSection }) => {
  return (
    <nav className="top-menu">
      <ul>
        {/* 绑定点击事件触发滚动 */}
        <li onClick={onScrollToSection} className="menu-item">
          跳转到Section One
        </li>
        <li className="menu-item">Section Two</li>
        {/* 其他菜单项 */}
      </ul>
    </nav>
  );
};

export default Topmenu;

额外说明 #

• 如果你的项目用的是类组件，逻辑是一样的：用createRef()创建Ref，通过forwardRef传递，在类组件的render里绑定Ref到根元素。
• scrollIntoView的参数可以根据需求调整，比如block: 'center'会让组件滚动到视口中央，behavior: 'auto'是默认的瞬间滚动。

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