classSet()
是一個簡潔的工具,用于簡單操作DOM中的class
字符串。
這里是一個常見的場景,處理方式中沒有使用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>;}
這會很快變得單調(diào)乏味,因為指定類名的代碼很難閱讀,并且容易出錯。classSet()
解決了這個問題:
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()
的時候,傳遞一個對象,對象上的鍵是你需要或者不需要的CSS類名。對應(yīng)真值的鍵將會成為結(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>;}
沒有更多需要鉆研的字符串拼接!
更多建議: