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

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

免费下载我的反应手册


更多反应教程: