Reactで動的なclassNameを指定する方法

最近また睡眠時間が減ったせいか、逆流性食道炎ぎみなアトラエデザイナー、紺谷でございます。
弊社も最近、Reactを導入し始めまして、デザイナーの私としてはかるーくキャッチアップしていじってる具合であります。

以前はRailsでなんとなーくif文とか使いながらHTMLの中にゴリッと動的なclass名を割り当ててましたが、Reactになってどうも勝手が違う。
そこでちょっと調べてみたら classnames っていう便利なものがあったので触ってみました。

まずは npm で classnames をインストールします。

npm install classnames --save

で、以下のように利用しましょう。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import ClassNames from 'classnames';


class ListItem extends Component {
  render() {

    const classNameForListItem = ClassNames({
      "list-item": true,
      "is-newest": this.props.status === "non-read"
    });

    return (
      <ListItem className={classNameForListItem}>
        ・・・
      </ListItem>
    )
  }
}

上記の例だと、
list-item が常に利用するクラスなので true 。
is-newest が this.props.status === "non-read" の時だけ利用するクラス。

他の書き方としては、

    const classNameForListItem = ClassNames(
        "list-item",
        {
          "is-newest": this.props.status === "non-read"
        }
    );

と書いても上記と同じ意味になります。

さて、今年も残り攻めようっと。
来年はもっと攻めようっと。

みなさん良いお年を。