呈現元件

在開發Next.js網站時，我有需要根據螢幕大小將一個React元件移動到不同位置的需求。 特別需要的是，我有一個側邊欄元件，我希望它在大螢幕上位於螢幕左側，在小螢幕上位於內容之前。 由於我結構化的HTML標記和CSS的安排，並不立即清楚如何在不重寫大部分元件的情況下進行這種轉換。 所以我找到了Tailwind提供的一個不錯的解決方案。 方法如下：我在螢幕上兩次添加了元件，對於"大螢幕"的部分，我給它分配了hidden xl:block類，對於小螢幕的部分，則給它分配了xl:hidden類： <div className="hidden xl:block"> <Sidebar /> </div> ... <div className="xl:hidden"> <Sidebar /> </div> 缺點當然是元件被呈現了兩次，但這是一個沒有邏輯的簡單呈現元件，這是一個妥協我可以接受的。