【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の手前で処理するようにします。