ReactとEmotionでスタイル分岐対応

はじめに

「リンクがあるときは <a>タグにしたいけど、ないときは<div>タグにしたい」みたいな分岐、挙動やスタイルの変化をつけたい場合に書き方に迷ってので備忘録として残します。

前提

やりたかったとこととしては、下記。
Reactで一覧を.map()を使って表示する際、各データには「リンクがある」「リンクがない」という2パターンが混在していた。

リンクがある場合は、<a>タグで囲み、リンクがない場合は普通の<div>タグにしたい。
また、リンクがある場合だけ、クラスを付けて、スタイルを変更したい。

実装コード

{items.map((item) => {
  const LinkWrapper = isLink ? A_CardLink : DIV_CardLink;
  const className = item.href ? "link-style" : "";

  return (
    <li key={item.label}>
      <LinkWrapper {...(isLink ? { href: "https://example.com" } : {})}>
        <span className={`label ${className}`}>{item.label}</span>
      </LinkWrapper>
    </li>
  );
})}

例で、classNameも分岐してますが、この場合、A_CardLink配下のスタイルをつければ、スタイル反映できるため、不要。

おまけ

mapでreturnの省略できるできないについて

省略できる

list.map((item, index) => (
  <div>{item.title}</div>
));

省略できない

list.map((item, index) => {
  const isLink = item.link;
  return <div>{item.title}</div>;
});

使い分け

書き方	必要？	いつ使う？
()	return 省略	1行で返すだけなら楽、見やすい
{}	return 必須	複数行処理したいとき、定数定義したいとき