Блог

Все это на одной странице. Когда я нажимаю кнопку Button NavBar «Вход», я хочу, чтобы экран прокрутился до SubscriptionForm компонента. Я пробовал использовать useRef и forwardRef следовать этому руководству, но в моем случае это, похоже, не работает. Я также попробовал react-scroll <Link /> , и он работает, по сути, с двумя строками кода. Но я хочу знать, как сделать это возможным без использования 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>
  )
}
 

Решил ее с помощью useRef и. fowrawdRef
Вам нужно будет создать ссылку внутри App компонента и переслать ее полностью в form элемент, используя forwardRef .
Затем передайте ссылку в качестве опоры и используйте ее в NavBar компоненте.
Рабочий пример: Песочница