使用模板字符串和&&运算符反应条件类名

Question

关于StackOverflow的许多问题都涉及到将条件类名应用于React组件。但是，对于这种特殊情况，我还没有一个好的答案：

我有一个基本的div，我想有条件地应用“ is-required”类。这是我的方法：

<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' : ''}`}>

我听说过诸如类名之类的实用程序，但是我正在寻找一种不需要任何其他软件包的简单解决方案。

这里推荐的方法是什么？

Answer 1

实际上，有很多方法可以做到这一点，这就是其中一种。

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

或者你可以回来 null

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

按顺序，如果您有几个班级。

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

https://reactjs.org/docs/conditional-rendering.html

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

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