Mejores prácticas al agregar espacios en blanco en JSX

Entiendo cómo (y por qué ) agregar un espacio en blanco en JSX, pero me pregunto cuál es la mejor práctica o si alguna marca una diferencia real.

Envuelva ambos elementos en un tramo

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

Agréguelos en una línea

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

Agrega espacio con JS

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

Debido a que &nbsphace que tengas espacios sin rupturas, solo debes usarlo donde sea necesario. En la mayoría de los casos, esto tendrá efectos secundarios no deseados.

Las versiones anteriores de React, creo que todas las anteriores a la v14, se insertarían automáticamente <span> </span> cuando tuvieras una nueva línea dentro de una etiqueta.

Si bien ya no hacen esto, es una forma segura de manejar esto en su propio código. A menos que tenga un estilo que se dirija específicamente span(mala práctica en general), esta es la ruta más segura.

Según su ejemplo, puede ponerlos juntos en una sola línea, ya que es bastante corto. En escenarios de líneas más largas, probablemente debería hacerlo así:

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

Este método también es seguro contra los editores de texto con recorte automático.

El otro método es el {' '}que no inserta etiquetas HTML aleatorias. Esto podría ser más útil al diseñar, resaltar elementos y eliminar el desorden del DOM. Si no necesita compatibilidad con versiones anteriores de React v14 o anterior, este debería ser su método preferido.

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

Puede usar el espacio en blanco de la propiedad css y configurarlo para que se ajuste previamente al elemento div adjunto.

div {
     white-space: pre-wrap;
}

Puede agregar un espacio en blanco simple con el signo de comillas: {" "}

También puede usar literales de plantilla , que permiten insertar, incrustar expresiones (código dentro de llaves):

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

Yo tiendo a usar  

No es bonito, pero es la forma menos confusa de agregar espacios en blanco que he encontrado y me da un control absoluto sobre la cantidad de espacios en blanco que agrego.

Si quiero agregar 5 espacios:

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

Es fácil identificar exactamente lo que estoy tratando de hacer aquí cuando vuelvo al código semanas después.

No es necesario que inserte  o envuelva su espacio extra con <span/>. Simplemente use el código de entidad HTML para el espacio - 

Insertar espacio regular como entidad HTML

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

He estado tratando de pensar en una buena convención para usar al colocar texto junto a componentes en diferentes líneas, y encontré un par de buenas opciones:

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

o

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

Cada uno de estos produce un HTML limpio sin  marcas adicionales o extrañas. Crea menos nodos de texto que el uso {' '}y permite el uso de entidades html donde {' hello & goodbye '}no lo hace.

Puede usar llaves como expresión con comillas dobles y comillas simples para el espacio, es decir,

{" "} or {' '}

También puede utilizar literales de plantilla ES6, es decir,

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

También puede usar & nbsp como se muestra a continuación (dentro del intervalo)

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

También puede utilizar & nbsp en dangerouslySetInnerHTML al imprimir contenido html

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

use {} o {``} o  para crear espacio entre el elemento span y el contenido.

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

Si el objetivo es separar dos elementos, puede usar CSS como se muestra a continuación:

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