如何使用React和Tailwind在代碼塊中移動

在Next.js網站上工作時,我需要根據屏幕尺寸將React組件移動到標記中的另一個位置。

特別是在大型顯示器的屏幕左側,但在較小顯示器的內容之前,我有一個補充工具欄組件。

由於我組織HTML標記和CSS的方式,對我來說,尚不清楚如何在不重寫其中很大一部分的情況下執行此過渡。

因此,我看著Tailwind為我提供了一個不錯的解決方案。

這是這樣的:我在屏幕上兩次添加了組件,並分配了類hidden xl:block進入“大屏幕”部分,然後xl:hidden到較小屏幕的摘要:

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

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

當然,缺點是該組件被渲染兩次,但是由於這是一個沒有邏輯的簡單演示組件,所以我可以妥協。

免費下載我的反應手冊


更多反應教程: