L'application dispose de 2 niveaux d'utilisateurs, un utilisateur régulier et un administrateur. Vous devez créer un composant d'en-tête dans lequel certaines informations sont les mêmes pour tout le monde, et certaines - uniquement pour les administrateurs.

Il existe un composant d'en-tête de base:

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

'user-header__links' contient des liens, dont certains ne doivent être montrés qu'aux administrateurs. En outre, l'en-tête doit toujours avoir une liste déroulante, qui n'est disponible que pour les administrateurs.

Je vois 3 solutions possibles:

  1. Créez 2 composants différents, c'est-à-dire que j'ai UserHeader pour l'utilisateur, et copiez ce code dans un nouveau composant, modifiez-le si nécessaire et obtenez AdminHeader, en ajoutant les éléments et les liens nécessaires

  2. dans UserHeader, créez des accessoires / emplacements pour y jeter du contenu supplémentaire, puis adminHeader ressemblera à ceci:

<UserHeader links={some additional links for admins}>
  <AdminDropdown/>
</UserHeader/>
  1. Ne laissez que le composant AppHeader et mettez-y des éléments pour les utilisateurs et les administrateurs, et vérifiez simplement les éléments "admin" et montrez-leur si l'utilisateur est également un administrateur.

Je comprends qu'en principe toutes les options fonctionnent, mais parvenir à comprendre quelle option est la plus pratique et la plus pratique ne fonctionne pas. De plus, s'il y a des articles concernant ces points, je serai reconnaissant pour les liens.

0
eugenedrvnk 26 nov. 2020 à 22:30

2 réponses

Meilleure réponse

Je dirais que l'option 1 est juste beaucoup de passe-partout inutile, mais vous seul pouvez choisir entre 2 et 3, car tout dépend de la structure de votre projet, de vos implémentations, etc.

Comme pour tout, l'architecture des applications est une question de goût ... Personnellement, j'aime beaucoup l'idée de «minimalisme» ici.

1
k-wasilewski 26 nov. 2020 à 19:37

Je pense que le rendu conditionnel vous aiderait à résoudre ce problème - voici la page de documentation de React pour cela: https: // reactjs.org/docs/conditional-rendering.html

0
freefall 26 nov. 2020 à 19:36