私は理解しています(そしてなぜ) を使用して 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>
ベストアンサー1
 
を使用すると改行なしスペースが発生するため、必要な場合にのみ使用してください。ほとんどの場合、これは意図しない副作用をもたらします。
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>
この方法は、自動トリミングテキストエディタに対しても安全です。
もう 1 つの方法は、{' '}
ランダムな 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>