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

Posted 2023-02-21

【中文标题】使用模板字符串和 && 运算符反应条件类名

【英文标题】：React conditional classnames using template strings and && operator

【发布时间】：2018-10-26 21:04:18

【问题描述】：

*** 上有很多关于将条件类名应用于 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' : ''`>

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

这里推荐的方法是什么？

【问题讨论】：

isRequired 是布尔值还是字符串？

isRequired 是一个布尔值。

投票关闭，因为过于基于意见。就我个人而言，我只是在模板字符串中使用三元组，每个表达式之间有一个空格，而不是在它们内部。

[…].filter(Boolean).join(" ") 应该足够简单。

【参考方案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>

【讨论】：

空字符串不会比空字符串更好吗？不确定 null 会产生什么。

如果我使用空字符串它会产生一个空格，它不会产生任何结果。

必须是 React 的东西，因为 new String(null)+"" 为我生成“null”，所以当 isRequired 为 false(y) 时 <div class="some-classnull" 将是

如果我有几个课程我想有条件地申请怎么办？有点像这样：$isRequired && 'is-required' $isDisabled && 'is-disabled'.

@DrewJex 假设 isRequired 和 isDisabled 是一个空字符串，然后先做你的一些类，然后所有可选类都带有前导空格：$isRequired && "is-required"

【参考方案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'`

【参考方案3】：

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

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

【参考方案4】：

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

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

【参考方案5】：

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

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