我如何有条件地渲染顺风类的反应？

Question

我正在创建一个使用Tailwind(3.0.2)和ReactJ (17.0.2)的网站。

我有一个div包一个肚脐，我想有条件地呈现取决于屏幕大小。此代码用作基本情况：

<div className= { (showIcon ? "left-0" : `-left-full`) + " fixed bottom-0 top-12 bg-gray-500 bg-opacity-60 w-10/12 text-white p-2 flex flex-col"} >

对于中等屏幕和更大的屏幕(md:在顺风中)，我已经编写了这个代码，它也可以自己工作：

<div className= {nav ? 'nav active' : 'nav'}  > // (Nav and nav active are states defined elsewhere)

我想结合这两个片段，但我的代码会引发编译器错误。例如：

<div className= { (showIcon ? "left-0" : `-left-full`) + " fixed bottom-0 top-12 bg-gray-500 bg-opacity-60 w-10/12 text-white p-2 flex flex-col"} md:{nav ? 'nav active' : 'nav'} >

 Line 40:151:  Parsing error: Unexpected token (40:151)

Answer 1

我希望这是你所需要的：

<div className={`
    fixed bottom-0 top-12 bg-gray-500 bg-opacity-60 
    w-10/12 text-white p-2 flex flex-col

    ${showIcon?"left-0":"-left-full"}

    md:${nav ? 'nav active' : 'nav'}
    `}>

    </div>

Answer 2

使用tailwind，我经常编写utils classnames函数，根据类的类型将类划分为组，以提高可读性。

const classnames = (...classes: string[]) => classes.join(` `);

<div className={classnames(
    `${showIcon ? "left-0" : "-left-full"}`,
    "fixed bottom-0 top-12",
    "bg-gray-500 bg-opacity-60",
    "w-10/12",
    "text-white",
    "p-2",
    "flex flex-col",
    "nav",
  )}
>

如果您想在自定义类中使用directive，则可能需要使用屏幕()。

@media screen(sm) {
  .your-class {
    @apply ...your-tailwind-classes
  }
}

@media screen(md) {
  /* ... */
}