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

Question

在StackOverflow 上有很多关于将条件类名应用于 React 组件的问题;但是，对于这种特殊情况，我还没有看到一个好的答案：

我有一个基本的div，我想有条件地应用"是必需的"类。这是我的方法：

<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

class App extends React.Component {
constructor() {
super();
this.state = {
isRequired: false
};
}
render() {
return (
<div className="App">
<div className={this.state.isRequired ? 'is-required' : null}>Null</div>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='root'></div>

Answer 2

也许你会发现这个实用程序函数很有帮助(它将用作标记模板)：

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

Answer 3

如果您不想要假值，则可以使用它。

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

Answer 4

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

使用评估短路 (https://en.wikipedia.org/wiki/Short-circuit_evaluation)

Answer 5

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

https://www.npmjs.com/package/classnames

Answer 6

className={'rounded-lg ${isActive ？ "bg-violet-600" ：> "bg-slate-600"}'}>

这里有三个类：

1. 圆形-LG
2. BG-紫-600
3. BG-板岩-600

注意：

• 我想永远应用圆形-lg
• 如果为 true，则选择 bg-violet-600，否则选择 bg-slate-600