Best practice per l'aggiunta di spazi bianchi in JSX

Capisco come (e perché ) aggiungere uno spazio bianco in JSX, ma mi chiedo quale sia la migliore pratica o se qualche fa davvero la differenza?

Avvolgi entrambi gli elementi in una campata

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

Aggiungili su una riga

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

Aggiungi spazio con JS

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

Poiché &nbspti fa avere spazi unificatori, dovresti usarlo solo dove necessario. Nella maggior parte dei casi, ciò avrà effetti collaterali indesiderati.

Le versioni precedenti di React, credo tutte quelle precedenti alla v14, si inserivano automaticamente <span> </span>quando si aveva una nuova riga all'interno di un tag.

Anche se non lo fanno più, questo è un modo sicuro per gestirlo nel tuo codice. A meno che tu non abbia uno stile che mira specificamente span(cattiva pratica in generale), questa è la strada più sicura.

Per il tuo esempio, puoi metterli insieme su una singola riga poiché è piuttosto breve. In scenari di linea più lunga, è così che dovresti probabilmente farlo:

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

Questo metodo è anche sicuro contro gli editor di testo con taglio automatico.

L'altro metodo è usare {' '}che non inserisce tag HTML casuali. Ciò potrebbe essere più utile durante lo styling, l'evidenziazione degli elementi e la rimozione del disordine dal DOM. Se non hai bisogno della retrocompatibilità con React v14 o precedenti, questo dovrebbe essere il tuo metodo preferito.

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

È possibile utilizzare lo spazio vuoto della proprietà css e impostarlo per il pre-wrapping dell'elemento div che lo racchiude.

div {
     white-space: pre-wrap;
}

Puoi aggiungere un semplice spazio bianco con virgolette: {" "}

Inoltre è possibile utilizzare letterali modello , che consentono di inserire, incorporare espressioni (codice all'interno di parentesi graffe):

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

Tendo a usare  

Non è carino ma è il modo meno confuso per aggiungere spazi bianchi che ho trovato e mi dà il controllo assoluto sulla quantità di spazi bianchi che aggiungo.

Se voglio aggiungere 5 spazi:

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

È facile identificare esattamente cosa sto cercando di fare qui quando torno al codice settimane dopo.

Ho cercato di pensare a una buona convenzione da utilizzare quando si inserisce il testo accanto a componenti su righe diverse e ho trovato un paio di buone opzioni:

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

o

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

Ognuno di questi produce HTML pulito senza  markup aggiuntivo o estraneo. Crea meno nodi di testo rispetto all'utilizzo {' '}e consente l'utilizzo di entità html dove {' hello & goodbye '}non lo fa.

Non è necessario inserire  o avvolgere il tuo spazio extra <span/>. Usa semplicemente il codice entità HTML per lo spazio - 

Inserisci uno spazio regolare come entità HTML

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

Puoi usare le parentesi graffe come espressione sia con virgolette doppie che virgolette singole per lo spazio, ad es.

{" "} or {' '}

Puoi anche utilizzare i letterali modello ES6, ad esempio

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

Puoi anche usare & nbsp come sotto (all'interno dell'intervallo)

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

Puoi anche utilizzare & nbsp in dangerouslySetInnerHTML durante la stampa di contenuto html

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

usa {} o {``} o  per creare spazio tra l'elemento span e il contenuto.

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

Se l'obiettivo è separare due elementi, puoi utilizzare CSS come di seguito:

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