webentwicklung-frage-antwort-db.com.de

Best Practice beim Hinzufügen von Whitespace in JSX

Ich verstehe, wie (und warum ) ein Whitespace in JSX hinzugefügt wird, aber ich frage mich, was die beste Vorgehensweise ist oder ob irgend etwas wirklich einen Unterschied macht?

Umfassen Sie beide Elemente in einem Bereich.

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

Füge sie in einer Zeile hinzu

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

Platz mit JS hinzufügen

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

Da Sie durch &nbsp geschützte Leerzeichen haben, sollten Sie sie nur dort einsetzen, wo dies unbedingt erforderlich ist. In den meisten Fällen hat dies unbeabsichtigte Nebenwirkungen.

Ältere Versionen von React, ich glaube alle vor v14, würden automatisch <span> </span> einfügen, wenn Sie eine neue Zeile in einem Tag hatten.

Dies ist zwar eine sichere Methode, um dies in Ihrem eigenen Code zu behandeln. Wenn Sie nicht über ein Styling verfügen, das spezifisch auf span (schlechte Praxis im Allgemeinen) abzielt, ist dies die sicherste Route.

In Ihrem Beispiel können Sie sie in einer einzigen Zeile zusammenfassen, da sie ziemlich kurz ist. In längeren Szenarien sollten Sie dies wahrscheinlich 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 automatische Bearbeitung von Texteditoren geschützt.

Die andere Methode verwendet {' '}, wobei keine zufälligen HTML-Tags eingefügt werden. Dies kann bei der Gestaltung von Elementen, beim Hervorheben von Elementen und beim Entfernen von Unordnung aus dem DOM hilfreich sein. Wenn Sie keine Rückwärtskompatibilität mit React v14 oder früher benötigen, sollte dies die 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>
34
Sawtaytoes

Sie können template literals verwenden:

{` `} // Notice this sign " ` ",its not normal quotes.

Wir können Literale mit Ausdrücken verwenden (Code in geschweiften Klammern):

`${2 * a + b}.?!=-`
7
Vasyl Gutnyk

Ich neige dazu, &nbsp; zu verwenden.

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

Wenn ich 5 Felder hinzufügen möchte:

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

Es ist leicht zu erkennen, was genau ich hier versuche, wenn ich mich Wochen später mit dem Code beschäftige.

7
Daniel Murawsky

Sie können geschweifte Klammern wie einen Ausdruck mit doppelten Anführungszeichen und einfachen Anführungszeichen verwenden, d. H.

{" "} or {' '}

Sie können auch ES6-Vorlagenliterale verwenden, d. H. 

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

Sie können auch & nbsp wie unten verwenden

<span>sample text &nbsp; <span>

Sie können auch & nbsp in dangerouslySetInnerHTML verwenden, wenn Sie HTML-Inhalte drucken

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

Sie müssen nicht &nbsp; einfügen oder Ihren zusätzlichen Speicherplatz mit <span/> umschließen. Verwenden Sie einfach HTML-Entitätscode für Leerzeichen - &#32;

Füge regulären Speicherplatz als HTML-Entity ein

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

Ich habe versucht, mir eine gute Konvention vorzustellen, die verwendet werden soll, wenn Text in verschiedenen Zeilen neben Komponenten platziert wird.

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

oder

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

Jede dieser Dateien erzeugt eine saubere HTML-Datei ohne zusätzliche &nbsp;- oder andere externe Markierungen. Es erstellt weniger Textknoten als {' '} und erlaubt die Verwendung von HTML-Entitäten, wobei {' hello &amp; goodbye '} n tut

0
undefined

verwenden Sie {} oder {``} oder &nbsp;, um einen Abstand zwischen span Element und Inhalt zu schaffen.

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

Sie können die css-Eigenschaft white-space verwenden und festlegen, dass der Zeilenumbruch auf das einschließende div-Element erfolgt.

div {
     white-space: pre-wrap;
}