React で要素のクラスを動的に付け外しするなら JedWatson さんちの classnames が便利

ES6 JavaScript React.js

React 公式ドキュメントからもリンクされていました。

github.com

すてきなドヤ顔。

Usage はかなりシンプルなのでそれ読めばすぐ使えるよ！
…では味気ないので本日更新した MarkdownPreview の v.0.1.0 からコードを抜粋して利用例を紹介したいと思います。

// 例示なので説明に不要部分は削除してます

import ClassNames from 'classnames';

export default class ModalWindow extends React.Component {
    render() {
        const classNameModalWindow = ClassNames({
            'md-modal-window': true,
            'l-flex         ': true,
            'is-opacity-zero': this.state.isOpacityZero
        });

        return (<div className={classNameModalWindow}></div>);
    }
}

見て分かる通り、各クラス名と真偽値を紐付けたオブジェクトを classnames に食べさせてあげると、その真偽値に応じて任意のクラスを付与する・付与しないを設定できます。上の例では is-opacity-zero というクラス名を動的に付けたり外したりしたいので、state の変数の変数を利用しています。

ふだんキー名はシングルクオートで括らない派ですが、ハイフンを含むキー名の場合はシングルなりダブルなりで括らないと動かないので注意！