クラス名の操作
注意:
このモジュールは現在JedWatson/classnamesとして独立しており、
Reactには依存していません。
そのため、ここで使用されるアドオンは将来削除される予定です。
classSet()は、DOMのクラス文字列の操作を簡単にしてくれるシンプルなユーティリティです。
下記はよくある状況と、classSet()を使用しない方法です。
// inside some `<Message />` React component
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()はこの問題を解決してくれます。
render: function() {
var cx = React.addons.classSet;
var classes = cx({
'message': true,
'message-important': this.props.isImportant,
'message-read': this.props.isRead
});
// 最終的に同じ結果になりますが、分かりやすいコードになります。
return <div className={classes}>Great, I'll be there.</div>;
}
classSet()を使用する際に、必要に応じて割り当てるCSSクラス名のキー付きのオブジェクトを渡します。
trueであれば、そのキーが割り当てられる文字列になります。
また、classSet()はクラス名を引数として渡させて、その連結もしてくれます。
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>;
}
これ以上の文字列連結のハックは無いでしょう。