【React】JSX内にJavaScriptの式を埋め込む方法と式と文の違い

ReactのJSX内にJavaScriptの式を埋め込む方法を紹介します。

結論から言うと、JSXの中では{}で囲んだ部分がJavaScriptの式として評価されます。変数・計算・関数呼び出し・三項演算子・配列のmap()は埋め込めますが、if文やfor文のような「文」は書けません。HTML文字列をそのままHTMLとして表示したい場合は{}では足りず、後述のdangerouslySetInnerHTMLを使います。

JSX内にJavaScriptの式を埋め込む方法

const Func = () => {
  const str = "文字列";

  // {}でJSの式を埋め込むことが可能
  return <h3>タイトル {str}</h3>;
};
export default Func;

上のように{}を使うとJavaScriptの式を埋め込めます。
たとえば、変数、配列、関数、コメント、JSXなどを埋め込めます。

条件による出し分けと配列の描画は、実務で特によく使う形です。

const List = ({ items, isLoggedIn }) => {
  return (
    <div>
      {/* 三項演算子は式なので埋め込める */}
      <p>{isLoggedIn ? "ログイン中" : "ゲスト"}</p>

      {/* 配列はmap()でJSXの配列に変換して埋め込む */}
      <ul>
        {items.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

map()で返した要素には、Reactが差分を追えるようにkeyを付けます。オブジェクトのプロパティをまとめてpropsとして渡したい場合は、配列の中のオブジェクトのプロパティすべてをpropsとして渡す方法で解説しています。

HTML文字列を埋め込みたい場合

{}に"<b>太字</b>"のようなHTML文字列を渡しても、Reactはエスケープしてタグをそのまま文字として表示します。これはXSSを防ぐための仕様です。
HTMLとして描画したいときだけ、dangerouslySetInnerHTMLを使います。

const Html = ({ html }) => {
  // 信頼できるHTMLだけを渡す。外部入力はサニタイズしてから使う
  return <div dangerouslySetInnerHTML={{ __html: html }} />;
};

名前のとおり危険を伴う操作なので、ユーザー入力や外部APIのHTMLをそのまま渡さないでください。HTML側に埋め込まれたJSONをReactから読み取る手順は、別記事のReactでHTML埋め込みJSONを取得する方法にまとめています。

式と文の違い

式は、値を返すもの、変数に代入できるものを指します。
文はそれ以外で、たとえば変数の宣言文、for文、if文などがあります。
三項演算子はif文を簡略化したものですが、変数に代入できるため式に分類されます。
JSX内では式しか使えないので、文はreturnの手前で処理します。

const Status = ({ count }) => {
  // if文はreturnの手前で処理して、結果だけを変数に入れる
  let label;
  if (count === 0) {
    label = "なし";
  } else {
    label = `${count}件`;
  }

  return <p>{label}</p>;
};

&&による短絡評価も式なので{isOpen && <Panel />}のように書けます。ただしcount && ...のように数値を左側に置くと、0がそのまま描画されるのでcount > 0 && ...と比較式にします。

JSXの中に別のJSXを渡す方法としては、childrenも使えます。部品を再利用しやすくする書き方はpropsのchildrenの基本的な使い方と実例を参考にしてください。