JSXのclassNameのクラスを動的に追加する


公開中ならpublished, 非公開ならunpublishedをclassNameに追加するというイメージ。

実装

配列内で三項演算子を使って処理し、そのあとでjoin()を使って連結することで実装できた。

className={[
  'post',
  isPublished ? 'published' : 'unpublished'
].join(' ')}

参考

How to add multiple classes to a ReactJS Component