Comment déplacer des blocs de code avec React et Tailwind

En travaillant sur un site Web Next.js, j'ai eu le besoin de déplacer un composant React à un endroit complètement différent dans mon balisage, en fonction de la taille de l'écran.

En particulier, j'avais un composant Sidebar que je voulais sur le côté gauche de l'écran sur un grand écran, mais avant le contenu sur un écran plus petit.

En raison de la façon dont j'ai organisé le balisage HTML et le CSS, je ne savais pas immédiatement comment effectuer cette transition sans en réécrire une bonne partie.

J'ai donc regardé Tailwind pour me proposer une belle solution.

Et c'était comme ça: j'ai ajouté le composant deux fois à l'écran, assignant la classehidden xl:blockà la partie «grand écran», etxl:hiddenà l'extrait pour les petits écrans:

<div className="hidden xl:block">
  <Sidebar />
</div>

<div className=“xl:hidden”> <Sidebar /> </div>

L'inconvénient bien sûr est que le composant est rendu deux fois, mais étant un simple composant de présentation sans logique, c'était un compromis avec lequel je pourrais vivre.

Téléchargez mon gratuitManuel React


Plus de tutoriels de réaction: