Css React JSX样式

所以我在做一个项目，而我在一个单独的.css类中做所有的样式设计。现在我有了一个函数，传入的道具是“活动的”，是真是假。我希望函数中的div总是有一个样式（

sideBarOption

），如果active为true，那么它也有一个额外的样式（

sideBarOption--active

）。从一些教程中，我得到了以下信息：

function SidebarOption({active, text, Icon}){
    return(
        <div className={`sidebarOption ${active && 'sidebarOption--active' }`}>
            <Icon />
            <h2>{text}</h2>
        </div>
    )
}

函数侧选项（{active，text，Icon}）{
返回(
{text}
)
}

这段代码可以工作，并且能够应用额外的样式。我只是不知道这条线是怎么工作的，它是做什么的。你能把它分解一下吗

<div className={`sidebarOption ${active && 'sidebarOption--active' }`}>

此外，如果你知道任何其他方式来添加额外的样式，请让我知道。例如，是否有一种方法仅使用常规的if-else语句来应用其他样式

---

谢谢

这是字符串插值。这句特别的话>>`你太棒了！谢谢你跟我解释这件事？三元表达，更有意义！

const classes = () => {
  const classString = 'sidebarOption ';
  if(active) {
    classString += 'sidebarOption--active';
  }

  return classString;
}

<div className={ classes() }>
  <Icon />
    <h2>{text}</h2>
  </div>