React中点击NavBar按钮如何不依赖react-scroll滚动到SubscriptionForm组件

实现方案 #

核心逻辑是在两个组件的公共父级App中声明ref，通过props逐层透传，将ref绑定到SubscriptionForm的根DOM节点，再将滚动触发方法传递给NavBar的按钮绑定点击事件即可，完整修改如下：

1. 修改 SubscriptionForm.js

使用forwardRef包裹组件，将传入的ref绑定到组件根DOM节点上：

import { forwardRef } from 'react';

const SubscriptionForm = forwardRef((props, ref) => {
  return (
    <Form ref={ref}>...</Form>
  )
});

export default SubscriptionForm;

2. 修改 Home.js

接收父组件传入的ref，透传给SubscriptionForm组件：

import SubscriptionForm from './SubscriptionForm/SubscriptionForm'

const Home = ({ formRef }) => {
  return (
    <div>
      // other components
      <SubscriptionForm ref={formRef} />
    </div>
  )
}

export default Home;

3. 修改 NavBar.js

接收父组件传入的滚动触发方法，绑定到按钮的点击事件：

const NavBar = ({ onScrollToForm }) => {
  return (
    <div>
      // other stuff
      <Button onClick={onScrollToForm} />
    </div>
  )
}

export default NavBar;

4. 修改 App.js

创建ref实例，编写滚动逻辑，将对应参数分别传递给子组件：

import { useRef } from 'react';
import NavBar from './NavBar/NavBar'
import Home from './Home/Home'

const App = () => {
  const subscriptionFormRef = useRef(null);

  const handleScrollToForm = () => {
    // 可选配置：behavior设为smooth为平滑滚动，block设为start表示滚动到元素顶部对齐视口
    subscriptionFormRef.current?.scrollIntoView({
      behavior: 'smooth',
      block: 'start'
    });
  };

  return (
    <div>
      <NavBar onScrollToForm={handleScrollToForm} />
      <Home formRef={subscriptionFormRef} />
    </div>
  )
}

export default App;

之前useRef+forwardRef方案不生效，通常是ref传递路径中断，或者没有将ref正确绑定到真实DOM节点上导致的，按上述步骤补全传递链路即可正常运行。

内容的提问来源于stack exchange，提问作者Htet Oo Wai Yan