JSXの中で文字列を展開するときはテンプレートリテラルを使う方が綺麗なHTMLになる

Last updated at 2022-12-20Posted at 2022-11-30

この記事の概要

JSXを書いていてこんな感じの文字列の展開、していませんか？

export const Text = () => {
  const text = "foo";
  return <p>{text} bar</p>;
}

基本的に問題は無いんですが、最終的なHTMLを綺麗にするならテンプレートリテラルにした方が良いので記事にしました。

先ほどの内容をDev toolsで見てみましょう。

描画されたHTMLは次のようになっています。

<p>
  "foo"
  " bar"
</p>

何が起きているかというと、プレーンなテキストとJavaScriptを展開したテキストとが、別のテキストノードとして指定されてしまっています。

ひとまとめにしたい文字列を{``}で括り、その中で展開するだけです。

  export const Text = () => {
    const text = "foo";
    return (
-     <p>{text} bar</p>
+     <p>{`${text} bar`}</p>
    );
  }

Dev toolsで見てみましょう。

描画されたHTMLは次のようになっていて、整っています。

<p>foo bar</p>

JSXでなく通常のJavaScriptの場合はnormalize()をかけるだけで綺麗になります。

最後まで読んでくださってありがとうございます！
Twitterでも情報を発信しているので、良かったらフォローお願いします！

Devトークでのお話してくださる方も募集中です！