在開發Next.js網站時,我有需要根據螢幕大小將一個React元件移動到不同位置的需求。

特別需要的是,我有一個側邊欄元件,我希望它在大螢幕上位於螢幕左側,在小螢幕上位於內容之前。

由於我結構化的HTML標記和CSS的安排,並不立即清楚如何在不重寫大部分元件的情況下進行這種轉換。

所以我找到了Tailwind提供的一個不錯的解決方案。

方法如下:我在螢幕上兩次添加了元件,對於"大螢幕"的部分,我給它分配了hidden xl:block類,對於小螢幕的部分,則給它分配了xl:hidden類:

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

...

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

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