類名操作

classSet()是一個(gè)簡(jiǎn)潔的工具，用于簡(jiǎn)單操作DOM中的class字符串。

這里是一個(gè)常見的場(chǎng)景，處理方式中沒有使用classSet()：

// inside some `<Message />` React componentrender: 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>;}

這會(huì)很快變得單調(diào)乏味，因?yàn)橹付惷拇a很難閱讀，并且容易出錯(cuò)。classSet()解決了這個(gè)問題：

render: function() {  var cx = React.addons.classSet;  var classes = cx({    'message': true,    'message-important': this.props.isImportant,    'message-read': this.props.isRead
  });  // same final string, but much cleaner
  return <div className={classes}>Great, I'll be there.</div>;}

當(dāng)使用classSet()的時(shí)候，傳遞一個(gè)對(duì)象，對(duì)象上的鍵是你需要或者不需要的CSS類名。對(duì)應(yīng)真值的鍵將會(huì)成為結(jié)果字符串的一部分。

classSet也允許傳遞一些類名作為參數(shù)，然后拼接這些類名：

render: function() {  var cx = React.addons.classSet;  var importantModifier = 'message-important';  var readModifier = 'message-read';  var classes = cx('message', importantModifier, readModifier);  // Final string is 'message message-important message-read'
  return <div className={classes}>Great, I'll be there.</div>;}

沒有更多需要鉆研的字符串拼接！