React check, находится ли компонент в фокусе из TabView

Question

У меня есть компонент TabView, у которого есть несколько вкладок, содержащих компоненты. Эти компоненты имеют целые иерархии других компонентов. Как я могу узнать из любого дочернего компонента, произвольно вложенного в одну из этих иерархий, находится ли родительская вкладка в фокусе в TabView?

Предпочтительно, я бы хотел реализовать это похоже на react-navigation s withNavigationFocus (или эквивалентный хук), так что любой компонент может знать, находится ли он в фокусе табуляции, без необходимости передавать реквизиты по цепочке компонентов. Я думаю, у вас может быть TabViewContext, для которого компоненты могут регистрировать себя как слушатели фокуса, выполнив useContext. TabViewContext будет предоставляться TabView, а TabView будет отвечать за определение того, какие зарегистрированные слушатели находятся в фокусе при изменении вкладок. Моя дилемма заключается в том, что я не знаю, как TabView может эффективно определять, какие вложенные дочерние компоненты попадают в фокус при изменении вкладки. Есть идеи?

Answer 1

В случае, если другие родительские вкладки скрыты, вы можете проверить видимость в обычном JS, вместо того, чтобы иметь гораздо более сложное решение ... Ознакомьтесь с этим ответом о том, как это сделать.

Таким образом, компоненты, которые заботятся о видимости своей родительской вкладки, могут использовать ref для своих собственных элементов DOM и проверять, видны они или нет. Вы можете встроить это в простую вспомогательную функцию или хук

EDIT :

Я бы предложил использовать что-то вроде этого:

Каждая вкладка предоставит контекст с методом для любого потомка, чтобы зарегистрировать обратный вызов, который будет вызываться, когда вкладка скрыта. TabView может передавать свойство isVisible каждой вкладке (если это еще не сделано), поэтому Tab может знать, когда его отображение изменяется.

Когда вкладка изменяется с видимой на скрытую. Все зарегистрированные обратные вызовы будут вызываться.

Я бы, конечно, написал ловушку или вспомогательную функцию для создания этого контекста TabVisibilty, чтобы каждый компонент Tab мог использовать его повторно.