Javascript 使用模板字符串和&&；操作人员

关于StackOverflow，有许多问题与应用条件类名来反应组件有关；然而，对于这种特殊情况，我没有看到一个好的答案：

我有一个基本div，我想有条件地应用“isrequired”类。我的做法如下：

<div className={`some-class ${isRequired && 'is-required'}`}>

这里的主要问题是，当isRequired为false时，我编译的HTML代码的结果如下所示：

<div class='some-class false'>

显然，我可以使用这样的三元运算符，这样我就可以返回一个空字符串：

<div className={`some-class ${isRequired ? 'is-required' : ''}`}>

但是在编译的HTML代码中，类中包含了这个额外的随机空间，这不会导致任何渲染问题，但我仍然不喜欢它：

<div class='some-class '>

尽管如此，我还是可以删除“someClass”之后的空格，并将其包含在“isRequired”之前，但现在它更难阅读，感觉有点笨重：

<div className={`some-class${isRequired ? ' is-required' : ''}`}>

我听说过诸如类名之类的实用程序，但我正在寻找一个简单的解决方案，在这里我不需要任何额外的包

---

这里推荐的方法是什么？

实际上，有很多方法可以做到这一点，下面是其中之一

<div className={isRequired ? 'some-class is-required': 'some-class'}>

按顺序，如果你有几个班

<div className={isRequired ? 'some-class is-required': isDisabled ? 'some-disabled-class' : 'some-class'}>

类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
isRequired:错误
};
}
render（）{
返回(
无效的
);
}
}
ReactDOM.render（，document.getElementById（'root'））
也许您会发现此实用程序功能很有用（它将用作标记模板）：

现在您可以这样使用它：

className={c`my-class ${this.props.done && 'done'} selected`}

或

如果您使用的是导入/导出系统，我强烈建议您使用此包来加入类名

必填项

使用评估短路（）
如果不需要假值，可以使用它


空字符串不是比空字符串好吗？不确定null会产生什么。如果我使用空字符串，它将不会产生任何结果，它将产生一个空格。这一定是一个React事件，因为
新字符串（null）+
会为我产生“null”，所以
如果我有几个类要有条件地应用，情况会怎样？有点像这样：
${isRequired&&&'是必需的}${isRequired&&'是禁用的}
@DrewJex假设isRequired and isDisabled是一个空字符串，然后首先执行some类，然后执行所有可选类，并在其后使用前导空格：${isRequired&&&&“是必需的”}
isRequired
是一个布尔值还是一个字符串？isRequired是一个布尔值。投票决定关闭，因为太基于意见。就我个人而言，我只是在模板字符串中使用三元组，每个表达式之间有一个空格，而不是在它们内部。
[…].filter（Boolean）.join（“”）
应该足够简单。
const c = (strings = [], ...classes) => {
  let myClass = '';
  strings.forEach((s, i) => {
    myClass += s + (classes[i] || '');
  });

  return myClass.trim().replace('  ', ' ');
}

className={c`my-class ${this.props.done && 'done'} selected`}

className={c`some-class ${isRequired && 'is-required'} ${isDisabled && 'some-disabled-class'}`}

<div className={isRequired && 'is-required'}>Required</div>