如何在应用程序中构建组件的“组合”？

Question

该应用程序有 2 个级别的用户，普通用户和管理员。 您需要制作一个 header 组件，其中某些信息对每个人都是相同的，而有些信息仅适用于管理员。

有一个基本的 header 组件：

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

'user-header__links' 包含链接，其中一些应该只显示给管理员。 此外，header 必须仍然有下拉菜单，该下拉菜单仅供管理员使用。

我看到了 3 种可能的解决方案：

1. 制作2个不同的组件，即我有用户的UserHeader，并将此代码复制到一个新组件，根据需要进行编辑并获取AdminHeader，添加必要的元素和链接

2. 在 UserHeader 中，制作 props/slots 以将其他内容放入其中，然后 adminHeader 将如下所示：

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

3. 只保留 AppHeader 组件并为用户和管理员放入元素，如果用户也是管理员，只需检查“admin”元素并显示它们。

我知道原则上所有选项都有效，但要了解哪个选项更方便和实用，不知何故是行不通的。 另外，如果有任何关于这些要点的文章，我将不胜感激链接。

Answer 1

我会说选项 1 只是很多不必要的样板，但只有您可以在 2 和 3 之间进行选择，因为这完全取决于您的项目结构、实现等等......

与所有事物一样，应用程序架构在很大程度上与品味有关……我个人非常喜欢这里的“极简主义”理念。

Answer 2

我认为条件渲染可以帮助您解决这个问题 - 这是 React 的文档页面： https://reactjs.org/docs/conditional-rendering.html