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

JSXに空白を追加する方法（および理由）は理解していますが、ベストプラクティスは何か、または実際に違いがあるかどうか疑問に思っています。

両方の要素をスパンでラップします

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

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

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

cssプロパティの空白を使用して、それを囲んでいるdiv要素にプリラップするように設定できます。

div {
     white-space: pre-wrap;
}

引用符で囲まれた単純な空白を追加できます。 {" "}

また、テンプレートリテラルを使用して、式（中括弧内のコード）を挿入、埋め込むことができます。

`${2 * a + b}.?!=-` // Notice this sign " ` ",its not normal quotes.

私は使う傾向があります  

それはきれいではありませんが、私が見つけた空白を追加するための最も混乱の少ない方法であり、追加する空白の量を完全に制御できます。

5つのスペースを追加したい場合：

Hello&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span className="second-word-formatting">World!</span>

数週間後にコードに戻ったときに、ここで何をしようとしているのかを正確に特定するのは簡単です。

さまざまな行のコンポーネントの横にテキストを配置するときに使用する適切な規則を考えようとしてきましたが、いくつかの適切なオプションが見つかりました。

<p>
    Hello {
        <span>World</span>
    }!
</p>

または

<p>
    Hello {}
    <span>World</span>
    {} again!
</p>

これらはそれぞれ、追加 またはその他の無関係なマークアップなしでクリーンなhtmlを生成します。を使用するよりも少ないテキストノードを作成し{' '}、{' hello & goodbye '}そうでない場合はhtmlエンティティを使用できます。

 余分なスペースを挿入したり、でラップしたりする必要はありません<span/>。スペースにはHTMLエンティティコードを使用するだけです- 

HTMLエンティティとして通常のスペースを挿入します

<form>
  <div>Full name:</span>&#32;
  <span>{this.props.fullName}</span>
</form>

スペースに二重引用符と一重引用符の両方を使用した式のような中括弧を使用できます。

{" "} or {' '}

ES6テンプレートリテラルを使用することもできます。

`   <li></li>` or `  ${value}`

以下のように＆nbspを使用することもできます（スパン内）

<span>sample text &nbsp; </span>

HTMLコンテンツを印刷するときに、dangerlySetInnerHTMLで＆nbspを使用することもできます

<div dangerouslySetInnerHTML={{__html: 'sample html text: &nbsp;'}} />

使用{}または{ `}または span要素とコンテンツの間のスペースを作成します。

<b> {notif.name} </b> <span id="value"> &nbsp;{ notif.count }{``} </span>

目標が2つの要素を分離することである場合は、次のようにCSSを使用できます。

A<span style={{paddingLeft: '20px'}}>B</span>