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

2022年11月21日React

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

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

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

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

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

式と文の違い

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