[解決済み] JSXで空白を追加する際のベストプラクティス

質問

私は、どのように（そして なぜ を追加する方法を理解していますが、何がベストプラクティスなのか、または何か本当の違いがあるのか、疑問に思っています。

両方の要素をspanで囲む

<div className="top-element-formatting">
  <span>Hello </span>
  <span className="second-word-formatting">World!</span>
</div>

1行にまとめる

  <div className="top-element-formatting">
    Hello <span className="second-word-formatting">World!</span>
  </div>

JSでスペースを追加する

<div className="top-element-formatting">
    Hello {" "}
    <span className="second-word-formatting">World!</span>
</div>

どのように解決するのですか？

なぜなら &nbsp を使うと改行されないスペースが生じるので、必要な場合にのみ使うようにしましょう。ほとんどの場合、意図しない副作用が発生します。

Reactの古いバージョン、確かv14より前のものはすべて、自動的に <span> </span> を自動的に挿入していました。

もはやこれを行うことはできませんが、これはあなた自身のコードでこれを処理する安全な方法です。特にターゲットとするスタイルがない限り span (を特にターゲットとしたスタイリング（一般に悪い習慣）でない限り、これが最も安全なルートです。

あなたの例では、かなり短いので、それらを一緒に1つの行に置くことができます。長い行のシナリオでは、おそらくこのようにする必要があります。

  <div className="top-element-formatting">
    Hello <span className="second-word-formatting">World!</span>
    <span> </span>
    So much more text in this box that it really needs to be on another line.
  </div>

この方法は、自動トリミングを行うテキストエディタに対しても安全です。

もう一つの方法は {' '} を使うもので、ランダムな HTML タグを挿入しません。これはスタイリングや要素のハイライト、DOMの乱雑さを取り除く際に便利です。React v14以前との後方互換性を必要としない場合は、この方法を優先してください。

  <div className="top-element-formatting">
    Hello <span className="second-word-formatting">World!</span>
    {' '}
    So much more text in this box that it really needs to be on another line.
  </div>