javascript - 为什么通过条件字符串连接添加 css 类会很糟糕？

Question

我正在阅读以下文档 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() 解决了这个问题:
我不明白，我的意思是我在我的代码中使用了模式，他们提到这是一种不好的做法。为什么会这样？会出什么问题？

Answer 1

由于@yu_ominae 提到的原因，这是不好的做法。使用 classSet() 修复了代码中缺乏清晰度的问题，但它要求您在普通 React 上使用 React 和 Addons。如果您需要担心站点的带宽，考虑到 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()，那也可以。