如何在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>

缺點當然是元件被呈現了兩次，但這是一個沒有邏輯的簡單呈現元件，這是一個妥協我可以接受的。

tags: [“React”, “Tailwind CSS”, “呈現元件”, “CSS樣式”, “移動元件”]