Edited at
AtraeDay 21

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

More than 1 year has passed since last update.

最近また睡眠時間が減ったせいか、逆流性食道炎ぎみなアトラエデザイナー、紺谷でございます。

弊社も最近、Reactを導入し始めまして、デザイナーの私としてはかるーくキャッチアップしていじってる具合であります。

以前はRailsでなんとなーくif文とか使いながらHTMLの中にゴリッと動的なclass名を割り当ててましたが、Reactになってどうも勝手が違う。

そこでちょっと調べてみたら classnames っていう便利なものがあったので触ってみました。

まずは npmclassnames をインストールします。

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-newestthis.props.status === "non-read" の時だけ利用するクラス。

他の書き方としては、

    const classNameForListItem = ClassNames(

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

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

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

来年はもっと攻めようっと。

みなさん良いお年を。