如何使用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>

当然，缺点是该组件被渲染两次，但是由于这是一个没有逻辑的简单演示组件，所以我可以妥协。

免费下载我的反应手册


更多反应教程：


在线技术百科！