Блог

Я использую стороннюю библиотеку react (blueprintjs) с Tab компонентом, который используется следующим образом:

 <Tab
    id="notifications"
    title={<span>"Notifications"</span>}
    panel={<div>The content of the page</div>}
/>
  

Вместо того, чтобы отображаться напрямую, родительский компонент Tabs отображает все дочерние компоненты, которые имеют тип Tab .

Я хотел бы связать title panel реквизиты и вместе, чтобы я мог показывать значок в title элементе в зависимости от состояния panel элемента:

Как мне поступить с этим?

Мои первоначальные идеи:

1. Получить количество непрочитанных уведомлений из элемента panel через ссылку и передать его элементу title в качестве реквизита

2. Переместить состояние на один уровень выше. Это кажется неудобным — я хочу, чтобы управление уведомлениями оставалось на странице уведомлений.

3. Есть <NotificationTab ... /> элемент, который обрабатывает состояние для панели заголовок вместе. Проблема с этим методом заключается в том, что родительский Tabs компонент не распознает Tab некомпоненты.

Примечание: я знаю, что по этому поводу есть несколько вопросов, но ответ всегда таков: «перенесите состояние в родительский компонент». Я действительно предпочел бы этого не делать, поскольку родительский компонент не имеет никакого отношения к уведомлениям — он просто переключает вкладки.