#reactjs #react-hooks
Вопрос:
У меня есть компонент React (крючки) внутри аккордеона ( <details> элемента).
Компонент делает некоторые предположения о offsetWidth доступности некоторых дочерних элементов, но поскольку аккордеон закрыт, компонент не виден, и эти ссылки имеют ширину смещения 0.
Мне нужно повторно визуализировать компонент после того, как аккордеон будет открыт и сам компонент станет видимым.
Я пытаюсь передать состояние аккордеона (открыто/закрыто) компоненту, чтобы запустить рендеринг, когда это изменится, но эффект использования запускается до того, как браузер нарисует компонент, поэтому ширина по-прежнему равна 0, даже если состояние аккордеона открыто.
Есть идеи, как это решить?
Комментарии:
1. Не могли бы вы добавить какой-нибудь код?
Ответ №1:
Ну на самом деле useEffect вызывается после рендеринга компонента. Так что, вероятно, это не ваша проблема.
Я предлагаю использовать состояние для динамического добавления класса display: none и его удаления. вместо изменения его ширины на ноль
Комментарии:
1. ширина равна 0, потому что «тело» аккордеона (и, следовательно, компонента) не отображается. Это собственный элемент <подробности>, не знаю, как он работает внутри.
2. вы правы… из документации react reactjs.org/docs/hooks-effect.html#example-using-hooks _ React гарантирует, что DOM будет обновлен к моменту запуска эффектов._
3. рад, что смог помочь