ReactとTailwindを使用してコードのブロックを移動する方法

Next.js Webサイトで作業しているときに、画面のサイズに応じて、Reactコンポーネントをマークアップのまったく別の場所に移動する必要がありました。

特に、大きなディスプレイの画面の左側に、小さいディスプレイのコンテンツの前に必要なサイドバーコンポーネントがありました。

HTMLマークアップとCSSを整理した方法が原因で、この遷移のかなりの部分を書き直さずにこの遷移を実行する方法がすぐにはわかりませんでした。

それで私はTailwindを見て素晴らしい解決策を提供してくれました。

そして、これが方法でした。画面にコンポーネントを2回追加し、クラスを割り当てました。hidden xl:block「大画面」の部分に、そしてxl:hidden小さい画面のスニペットへ:

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

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

もちろん、コンポーネントが2回レンダリングされるという欠点がありますが、これはロジックのない単純なプレゼンテーションコンポーネントであるため、妥協点として生きることができました。

私の無料ダウンロードReactハンドブック


その他の反応チュートリアル: