#javascript #reactjs #scroll #react-hooks #anchor
Вопрос:
У меня есть раздел, состоящий из 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>
должно сработать