React JSX 样式

Question

所以我正在处理一个项目，同时我在一个单独的 .css 类中完成我的所有样式。现在我有了一个函数，传入的props是“活跃的”，真假。我希望函数中的 div 始终具有样式（sideBarOption），然后如果 active 为真，它还具有附加样式（sidebarOption--active）。从一些教程中我得到了：

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

此代码有效，并且能够应用其他样式。我只是对这条线的工作原理以及它的作用感到困惑。你能分解一下吗：

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

另外，如果您知道添加其他样式的任何其他方法，请告诉我。例如，有没有办法只使用常规 if-else 语句来应用额外的样式？

谢谢！

Answer 1

这是字符串插值。这个特殊的引用 >> `

现在，你的这个条件有点特别，它是 JS 的一个技巧，允许你在不设置 else 语句的情况下编写三元表达式。如果 active 为 false，则不会尝试解析第二个条件，称为惰性求值，注意两个 '&'）。所以：

className={sidebarOption ${active && 'sidebarOption--active' }}

等于：

className={sidebarOption ${active ? 'sidebarOption--active' : '' }}

在第二个中，我写了你可能知道的三元条件：

Boolean ? 'true value' : 'else value'

现在，如果您想以更常见的方式编写条件（if...else），那么您必须在函数中外部化字符串构造：

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

  return classString;
}

并按如下方式使用：

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

在 StackOverflow 中，这个特殊的引用是用来显示代码的，所以很难解释抱歉，但是通过搜索“字符串插值”在 google 上很容易找到有关它的信息。