☰

JSX に空白を追加する際のベストプラクティス 質問する

tag-icon • tag-icon javascript reactjs
JSX に空白を追加する際のベストプラクティス 質問する

私は理解しています（そしてなぜ) を使用して 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

&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>

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

もう 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>

おすすめ記事