React TypeScript跨组件滚动到指定元素问题求助

方法一：使用useRef + 回调函数（推荐） #

通过父组件传递滚动逻辑给导航组件，点击时触发滚动到目标元素，适合需要自定义滚动行为的场景。

步骤1：修改Landing组件，创建ref和滚动函数 #

给Services组件绑定ref，同时定义滚动函数并传递给导航栏：

import React, { useEffect, useRef } from 'react';
import LandingNavBar from "./components/LandingNavBar";
import Header from "./components/Header";
import { initFlowbite } from 'flowbite'
import Services from "./components/Services";

function Landing() {
    useEffect(() => {
        initFlowbite()
    }, []);

    // 创建指向Services组件的ref
    const servicesRef = useRef(null);

    // 定义平滑滚动到Services的函数
    const scrollToServices = () => {
        servicesRef.current?.scrollIntoView({
            behavior: 'smooth',
            block: 'start'
        });
    };

    return (
        <div>
            {/* 把滚动函数传给导航栏 */}
            <LandingNavBar onScrollToServices={scrollToServices} />
            <Header/>
            {/* 给Services组件绑定ref */}
            <Services ref={servicesRef} />
        </div>
    );
}

export default Landing;

步骤2：修改Services组件，转发ref #

如果Services是函数组件，需要用forwardRef让父组件能获取到它的DOM节点：

import React, { forwardRef } from 'react';

// 用forwardRef转发ref到组件外层容器
const Services = forwardRef((props, ref) => {
    return (
        <div ref={ref} className="services-container">
            <h2>服务内容</h2>
            {/* 组件其他内容 */}
        </div>
    );
});

export default Services;

步骤3：修改LandingNavBar组件，触发滚动 #

在Services链接上添加点击事件，调用父组件传递的滚动函数：

import React from 'react';

function LandingNavBar({ onScrollToServices }) {
    return (
        <nav className="navbar">
            {/* 其他导航项 */}
            <a 
                href="#" 
                onClick={(e) => {
                    e.preventDefault(); // 阻止默认跳转行为
                    onScrollToServices();
                }}
            >
                Services
            </a>
        </nav>
    );
}

export default LandingNavBar;

方法二：使用HTML锚点（简单快捷） #

利用原生HTML锚点机制，无需额外React逻辑，适合基础滚动需求。

步骤1：给Services组件添加唯一id #

// Services组件
function Services() {
    return (
        <div id="services-section" className="services-container">
            <h2>服务内容</h2>
            {/* 组件其他内容 */}
        </div>
    );
}

export default Services;

步骤2：修改LandingNavBar的链接 #

直接使用锚点链接，同时添加全局样式实现平滑滚动：

function LandingNavBar() {
    return (
        <nav className="navbar">
            {/* 其他导航项 */}
            <a href="#services-section">Services</a>
        </nav>
    );
}

export default LandingNavBar;

在全局CSS中添加平滑滚动样式：

html {
    scroll-behavior: smooth;
}

两种方法对比 #

• useRef方法：灵活性高，可自定义滚动细节（比如调整偏移量、添加过渡动画），适合复杂场景。
• 锚点方法：代码简洁，无额外React逻辑，适合简单的页面内跳转需求。

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