Как правильно выстроить «композицию» компонентов в приложении?

Question

[eugenedrvnk]

В приложении есть 2 уровня пользователей, обычный юзер и админ. Нужно сделать компонент хедера в котором будет некая информация одинаковая для всех, а некоторая - только для админов.

Есть базовый компонент хедера :

<div class="user-header>
  <img src="logo">
  <div class="user-header__links>"
    ...
  </div>
</div>

В 'user-header__links' идут ссылки, некоторые из которых должны показываться только админам. Так же, в хедере должен ещё быть dropdown, так же доступны лишь администраторам.

Я вижу 3 варианта решения :

1) Сделать 2 разных компонента, т.е. оставить UserHeader, и он будет служить для юзера, и скопировать этот код в новый компонент, отредактировать как нужно и получим adminHeader, добавив нужные элементы и ссылки

2) В UserHeader сделать пропсы / слоты для прокидывания дополнительного контента в него, и тогда adminHeader будет выглядеть как-то так :

<UserHeader links={some additional links for admins}>
  <AdminDropdown/>
</UserHeader/>

3) Оставить один компонент AppHeader и в него позапихивать элементы и для юзеров, и для админов и на "админские" элементы просто ставить проверку и если юзер ещё и админ, то показывать.

Понимаю что впринципе все варианты рабочие, но прийти к пониманию какой вариант более удобный и практичный как-то не выходит. Так же, если возможно есть какие-то статьи касаемо этих моментов - буду благодарен за ссылки.

Answer 1

[Kirill Makarov]

1 вариант не очень, зачем верстать два компонента если можно обойтись одним.
2 зачем что то прикидывать опять таки с новым компонентом.
3 да хороший вариант, все сверстал и в зависимости от state например сделал проверку если {state && (<>контент>)}
3 вариант выйгрышнее всего потому что не нужны лишние компоненты, сразу показываешь то что нужно. Хотя в некоторых случаях например если проверка на то авторизованный ли пользователь то можно отображать разные компоненты как в первом случае, где первый компоненты это навигация по авторизации, а второй это навигация по личному кабинету