javascript - 使用模板字符串和 && 运算符 react 条件类名

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

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>