为什么通过条件通过字符串连接添加 css 类可能不好？答案

【问题标题】：Why addiing css classes through string concatenation via conditions can be bad?为什么通过条件通过字符串连接添加 css 类可能不好？
【发布时间】：2015-10-17 07:08:34
【问题描述】：

正如他们所提到的，我正在阅读以下文档https://facebook.github.io/react/docs/class-name-manipulation.html。

render: function() {
  var classString = 'message';
  if (this.props.isImportant) {
    classString += ' message-important';
  }
  if (this.props.isRead) {
    classString += ' message-read';
  }
  // 'message message-important message-read'
  return <div className={classString}>Great, I'll be there.</div>;
}

这很快就会变得乏味，因为分配类名字符串可能难以阅读且容易出错。 classSet() 解决了这个问题：
我不明白，我的意思是我在我的代码中使用了这种模式，他们提到的这种做法是一种不好的做法。为什么会这样？会出什么问题？

【问题讨论】：

你必须输入空格，你可能会忘记并把事情搞砸。当它发生时，它可能是一个很难追踪的错误。
我认为引用 This can quickly get tedious, as assigning class name strings can be hard to read and error-prone 回答了您的问题。一两个标签可能没问题，但更多的标签很快就会成为维护的噩梦。另外，您必须确保每个字符串的格式正确，否则您将在几个小时内追逐错误。
那么整个classNames或者classSet就解决了空格的问题？
classList 在这里会很有用

标签： javascript css reactjs

【解决方案1】：

由于@yu_ominae 提到的原因，这是一种不好的做法。使用 classSet() 修复了代码中缺乏清晰性的问题，但它要求您使用 React 和 Addons 而不是 vanilla React。如果您需要担心站点的带宽，考虑到 React 本身就相当大，这可能不是最好的主意。你可以做的是这样的：

render: function () {
        var classes = ['message'];
        if (this.props.isImportant) classes.push('message-important');
        if (this.props.isRead) classes.push('message-read');

        return <div className={classes.join(' ')}>Great, I'll be there.</div>;
}

我认为这应该比你写的更不容易出错，而且更容易阅读。如果您更愿意使用 classSet()，那也可以。

【讨论】：