Best Practice beim Hinzufügen von Leerzeichen in JSX

90

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>
Jan Swart
quelle
1
Sie brauchen keine zusätzliche Spanne, React hat langjährige Probleme mit Textknoten behoben und Ihr zweites Beispiel ist in Ordnung
Dominic
1
Ich weiß nicht, dass es eine definierte "Best Practice" gibt - sicherlich müssen Sie nicht alles in <span>Tags einschließen, aber ich befolge im Allgemeinen nur allgemeine HTML-Praktiken, wenn ich mir Gedanken über Leerzeichen mache .
Arthurakay

Antworten:

103

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>
Sawtaytoes
quelle
10

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;
}
i_code
quelle
Wenn der Behälter flexibel ist, benötigen Sie diese Lösung.
Curtis
Dies ist die einzige Nicht-& nbsp; Lösung, die für mich funktioniert hat!
Magnus
@Magnus Gern geschehen, mein Mann. Keine der Lösungen für diese Antwort funktionierte tatsächlich für meinen Sonderfall.
i_code
10

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.
Vasyl Gutnyk
quelle
In welcher Version von React funktioniert das für Sie? 15.6.2 scheint dies zu ignorieren.
SMHG
1
@smhg yo. es hängt nicht von der Version der Reaktion ab. seine Feautere von Ecmascript, Typoskript. Sie können Ihre Vorlage in die Chrome-Konsole eingeben, um zu testen, ob Ihre Vorlage in Ordnung ist. Problem kann auch in Ihren Babel-Einstellungen liegen.
Vasyl Gutnyk
1
Sie verwechseln Vorlagenliterale mit JSX-Ausdrücken. Um ein Leerzeichen über JSX hinzuzufügen, fügen Sie einfach eine Zeichenfolge aus einem Leerzeichen in einen JSX-Ausdruck ein . Der einfachste Weg, dies zu tun, ist {' '}. Sie benötigen dafür keine Vorlagenliterale, obwohl sie funktionieren (und auch {" "}).
Dan Dascalescu
ye, es war ein bisschen verwirrend Tippfehler korrigiert. Wie auch immer, ich bin sicher, 99,9% der Leute hier suchen nach Vorlagenliteralen :)
Vasyl Gutnyk
6

Ich neige dazu zu benutzen &nbsp;

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.

Daniel Murawsky
quelle
6
Ich kann mir in der Praxis nicht vorstellen, was eine Verwendung von 5 nicht unterbrechenden Räumen wäre, die typografisch sinnvoll ist, aber abgesehen von einem solchen Fall ist dies in der Praxis falsch. Wenn Sie dies für das Layout verwenden, sollten Sie stattdessen CSS verwenden. Wenn Sie ein Leerzeichen hinzufügen müssen, es aber nicht unterbrechen muss, gibt es viele andere Leerzeichen, die typografischer sind. Siehe diese Frage zum Beispiel: stackoverflow.com/questions/8515365/…
guioconnor
1
@guioconnor Versuchen Sie, Ihre Vorstellungskraft zu erweitern und denken Sie an eine Editoranwendung, z. B. vscode, und Sie werden feststellen, dass dies einen vollständigen typografischen Sinn ergibt: D.
Dan
5

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

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

<form>
  <div>Full name:</span>&#32;
  <span>{this.props.fullName}</span>
</form>
Andrey Ivlev
quelle
Randnotiz: Heute bin ich darauf gestoßen, als hübscher mein Code durch Formatieren der Space-Entität gebrochen wurde. Wenn Sie {""} verwenden, funktioniert es in einer Zeile für sich und wird nicht unterbrochen.
Gorhawk
Ich kam gerade herein, um dies meiner eigenen Antwort hinzuzufügen. Ich habe stattdessen deine positiv bewertet.
undefiniert
5

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 &nbsp;oder anderes fremdes Markup. Es erstellt weniger Textknoten als die Verwendung {' '}und ermöglicht die Verwendung von HTML-Entitäten, wo {' hello &amp; goodbye '}dies nicht der Fall ist.

nicht definiert
quelle
3

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;'}} />
Hemadri Dasari
quelle
2

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

<b> {notif.name} </b> <span id="value"> &nbsp;{ notif.count }{``} </span>
KARTHIKEYAN.A
quelle
1
nbsp = Non-Breakable Space, ein anderes Unicode-Zeichen als das normale Leerzeichen, das das Unterbrechen von Zeilen einschränkt. Manchmal ist das wünschenswert, nur um darauf hinzuweisen, dass es nicht den anderen Optionen entspricht.
Beni Cherniavsky-Paskin
1

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

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