单击另一个组件上的按钮时滚动到 React 组件

Question

这一切都在一个页面中。当我在 NavBar 中按下 Button 时，我希望屏幕滚动到 SubscriptionForm 组件。我在遵循 this tutorial but it doesn't seem to work in my case. I have also tried react-scroll 的 <Link /> 的同时尝试使用 useRef 和 forwardRef，它基本上使用两行代码。但是，我想知道的是如何在不使用 react-scroll 的情况下实现它。

我的文件夹和代码结构如下-

src
|-- Home
|   |-- Home.js
|   |-- SubscriptionForm
|   |   |-- SubscriptionForm.js
|-- NavBar
|   |-- NavBar.js
|-- App.js

在SubscriptionForm.js-

const SubscriptionForm = () => {
  return (
    <Form>...</Form>
  )
}

在Home.js-

import SubscriptionForm from './SubscriptionForm/SubscriptionForm'

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

在NavBar.js-

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

在App.js-

import NavBar from './NavBar/NavBar'
import Home from './Home/Home'

const App = () => {
  return (
    <div>
      <NavBar />
      <Home />
    </div>
  )
}

Answer 1

使用 useRef 和 fowrawdRef 解决了它。
您需要在 App 组件内创建一个 ref，并使用 forwardRef.
将其一直转发到 form 元素然后将 ref 作为 prop 传递并在 NavBar 组件中使用它。
工作示例：Sandbox

单击另一个组件上的按钮时滚动到 React 组件

Scrolls to a React component when a button is clicked on another component

scroll

reactjs