React中如何跳转到页面特定区域？添加组件ID方法无效

直接给React组件标签（如<Login id="login_section">）添加ID无效，因为组件标签属于虚拟DOM节点，最终不会直接渲染到真实HTML中。以下是可行的解决方法：

• 将ID添加到组件内部的根DOM元素
  打开你的Login组件，找到它最外层的真实DOM元素（通常是<div>），把ID直接加在这个元素上：

  // Login组件内部
  function Login() {
    return (
      <div id="login_section"> {/* 把ID加在这里 */}
        {/* 登录表单等组件内容 */}
      </div>
    );
  }
  

  之后使用传统锚点链接（<a href="#login_section">跳转到登录</a>）就能正常跳转。

• 使用useRef配合scrollIntoView实现精准控制
  如果需要通过代码触发跳转（比如按钮点击），可以用React的useRef和forwardRef来获取组件内部的DOM节点：

  1. 父组件中定义ref并触发跳转：

     import { useRef } from 'react';
     import Login from './Login';
     
     function App() {
       const loginRef = useRef(null);
     
       const handleScrollToLogin = () => {
         loginRef.current?.scrollIntoView({
           behavior: 'smooth', // 平滑滚动
           block: 'start' // 对齐到顶部
         });
       };
     
       return (
         <div>
           <button onClick={handleScrollToLogin}>跳转到登录区域</button>
           <Login ref={loginRef} />
         </div>
       );
     }
     

  2. 子组件中转发ref到根DOM元素：

     import { forwardRef } from 'react';
     
     // 使用forwardRef转发ref
     const Login = forwardRef((props, ref) => {
       return (
         <div ref={ref}> {/* 将ref绑定到根元素 */}
           {/* 登录组件内容 */}
         </div>
       );
     });
     
     export default Login;
     

• 动态加载组件的额外处理
  如果你的组件是通过路由懒加载或条件渲染加载的，需要确保组件渲染完成后再执行跳转。可以配合useEffect监听组件的加载状态，或者在路由跳转完成后触发滚动。

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