Как прокрутить вниз до скрытого раздела

#javascript #reactjs #scroll #react-hooks #anchor

Вопрос:

У меня есть раздел, состоящий из 2 компонентов:

  1. компонент триггера
  2. показать/скрыть компонент

В основном, когда я нажимаю на компонент триггера, появится новый компонент в разделе. Это просто обрабатывается useState

 const [toShow, setToShow] = useState(0);
 

А затем я использую метод onClick:

 onClick={() => setToShow(1)}
 

Отображение элемента в разделе компонент триггера:

 {toShow === 1 amp;amp; (
            <div className="show-box" id="myHiddenComponent">
                    <HiddenComponent />
            </div>
)}
 

Проблема в том, что мне нужно получить доступ к скрытому компоненту id="myHiddenComponent" с помощью моей навигационной панели. Это означает, что компонент не будет настроен на отображение. Но ссылка должна понимать, что она должна настроить ее на открытие, а затем перейти к компоненту. Возможно ли что-то подобное с React ?

Прямо сейчас я использую Хэшлинк

 <HashLink smooth to='#myHiddenComponent'>
  GO TO HIDDEN SECTON
</HashLink>
 

Но это, к сожалению, не работает, так как раздел скрыт.

Ответ №1:

вам нужно установить состояние toShow равным 1 при нажатии на компонент HashLink

Комментарии:

1. Но как я могу это сделать, если в 2 разных файлах находятся два разных компонента ?

2. <HashLink smooth to='#myHiddenComponent' onClick={() => setToShow(1}> GO TO HIDDEN SECTON </HashLink> должно сработать