Best Practice beim Hinzufügen von Leerzeichen in JSX

Ich verstehe, wie (und warum ) ein Leerzeichen in JSX hinzugefügt werden soll, aber ich frage mich, was die beste Vorgehensweise ist oder ob eine wirklich einen Unterschied macht.

Wickeln Sie beide Elemente in eine Spanne

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

Fügen Sie sie in einer Zeile hinzu

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

Fügen Sie mit JS Speicherplatz hinzu

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

Da &nbspSie nicht unterbrechende Leerzeichen haben, sollten Sie diese nur bei Bedarf verwenden. In den meisten Fällen hat dies unbeabsichtigte Nebenwirkungen.

Ältere Versionen von React, ich glaube alle vor Version 14, werden automatisch eingefügt, <span> </span>wenn Sie eine neue Zeile in einem Tag haben.

Obwohl sie dies nicht mehr tun, ist dies eine sichere Möglichkeit, dies in Ihrem eigenen Code zu handhaben. spanDies ist der sicherste Weg, es sei denn, Sie haben ein spezielles Styling (schlechte Praxis im Allgemeinen).

Gemäß Ihrem Beispiel können Sie sie in einer einzelnen Zeile zusammenfassen, da sie ziemlich kurz ist. In Szenarien mit längeren Leitungen sollten Sie dies wahrscheinlich so tun:

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

Diese Methode ist auch gegen das automatische Trimmen von Texteditoren sicher.

Die andere Methode verwendet {' '}keine zufälligen HTML-Tags. Dies kann nützlicher sein, wenn Sie Elemente stylen, hervorheben und Unordnung aus dem DOM entfernen. Wenn Sie keine Abwärtskompatibilität mit React v14 oder früher benötigen, sollte dies Ihre bevorzugte Methode sein.

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

Sie können die CSS-Eigenschaft White-Space verwenden und festlegen, dass das umschließende div-Element vorab umbrochen wird.

div {
     white-space: pre-wrap;
}

Sie können einfache Leerzeichen mit Anführungszeichen hinzufügen: {" "}

Sie können auch Vorlagenliterale verwenden , mit denen Sie eingebettete Ausdrücke einfügen können (Code in geschweiften Klammern):

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

Ich neige dazu zu benutzen  

Es ist nicht schön, aber es ist die am wenigsten verwirrende Art, Leerzeichen hinzuzufügen, die ich gefunden habe, und es gibt mir die absolute Kontrolle darüber, wie viel Leerzeichen ich hinzufüge.

Wenn ich 5 Leerzeichen hinzufügen möchte:

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

Es ist einfach, genau zu identifizieren, was ich hier versuche, wenn ich Wochen später auf den Code zurückkomme.

Sie müssen  Ihren zusätzlichen Platz nicht einfügen oder einwickeln <span/>. Verwenden Sie einfach HTML-Entitätscode für den Speicherplatz - 

Fügen Sie regulären Speicherplatz als HTML-Entität ein

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

Ich habe versucht, mir eine gute Konvention auszudenken, um Text neben Komponenten in verschiedenen Zeilen zu platzieren, und ein paar gute Optionen gefunden:

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

oder

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

Jedes von diesen erzeugt sauberes HTML ohne zusätzliches  oder anderes fremdes Markup. Es erstellt weniger Textknoten als die Verwendung {' '}und ermöglicht die Verwendung von HTML-Entitäten, wo {' hello & goodbye '}dies nicht der Fall ist.

Sie können geschweifte Klammern wie Ausdruck mit doppelten und einfachen Anführungszeichen für Leerzeichen verwenden, z.

{" "} or {' '}

Sie können auch ES6-Vorlagenliterale verwenden, z.

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

Sie können auch & nbsp wie unten verwenden (innerhalb der Spanne)

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

Sie können & nbsp auch in gefährlichSetInnerHTML verwenden, wenn Sie HTML-Inhalte drucken

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

Verwenden Sie {} oder {``} oder  , um Platz zwischen span-Element und Inhalt zu schaffen.

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

Wenn das Ziel darin besteht, zwei Elemente zu trennen, können Sie CSS wie folgt verwenden:

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