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

Question

The app has 2 levels of users, a regular user and an admin. You need to make a header component in which some information is the same for everyone, and some - only for admins.

There is a basic header component:

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

'user-header__links' contains links, some of which should only be shown to admins. Also, the header must still have dropdown, that is available only to admins.

I see 3 possible solutions:

1. Make 2 different components, ie I have UserHeader for the user, and copy this code to a new component, edit as necessary and get AdminHeader, adding the necessary elements and links

2. in UserHeader, make props / slots for throwing additional content into it, and then adminHeader will look something like this:

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

3. Leave only AppHeader component and put elements in it for both users and admins, and just check the "admin" elements and show them if the user is also an admin.

I understand that in principle all the options are working, but to come to an understanding of which option is more convenient and practical somehow does not work. Also, if there are any articles regarding these points, I will be grateful for the links.

Answer 1

I'd say that the option 1 is just lots of unnecessary boilerplate, but only you can choose between 2 and 3, as it all depends on your proj structure, implementations and so on...

As with everything, app architecture is a lot about taste... I, personally, very much like the idea of "minimalism" here.

Answer 2

I think Conditional Rendering would help you solve this problem - here's React's doc page for it: https://reactjs.org/docs/conditional-rendering.html