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>
javascript
reactjs
react-jsx
Jan Swart
quelle
quelle
<span>
Tags einschließen, aber ich befolge im Allgemeinen nur allgemeine HTML-Praktiken, wenn ich mir Gedanken über Leerzeichen mache .Antworten:
Da
 
Sie 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.
span
Dies 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>
quelle
Sie können die CSS-Eigenschaft White-Space verwenden und festlegen, dass das umschließende div-Element vorab umbrochen wird.
quelle
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.
quelle
{' '}
. Sie benötigen dafür keine Vorlagenliterale, obwohl sie funktionieren (und auch{" "}
).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 <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.
quelle
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>  <span>{this.props.fullName}</span> </form>
quelle
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
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.quelle
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)
Sie können & nbsp auch in gefährlichSetInnerHTML verwenden, wenn Sie HTML-Inhalte drucken
<div dangerouslySetInnerHTML={{__html: 'sample html text: '}} />
quelle
Verwenden Sie {} oder {``} oder
, um Platz zwischen span-Element und Inhalt zu schaffen.<b> {notif.name} </b> <span id="value"> { notif.count }{``} </span>
quelle
Wenn das Ziel darin besteht, zwei Elemente zu trennen, können Sie CSS wie folgt verwenden:
A<span style={{paddingLeft: '20px'}}>B</span>
quelle