javascript - learning - react router
Mejores prácticas al agregar espacios en blanco en JSX (7)
Debido a que   hace que tengas espacios sin interrupciones, 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, 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 apunte específicamente a la span (mala práctica en general), entonces esta es la ruta más segura.
Por su ejemplo, puede ponerlos en una sola línea juntos ya que es bastante corto. En escenarios de línea más larga, así es como probablemente deberías hacerlo:
<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 de recorte automático.
El otro método está utilizando {'' ''} que no inserta etiquetas HTML aleatorias. Esto podría ser más útil cuando estiliza, resalta elementos y elimina 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>
Entiendo cómo (y why ) agregar un espacio en blanco en JSX, pero me pregunto cuál es la mejor práctica o si alguna diferencia real.
Envolver ambos elementos en un lapso
<div className="top-element-formatting">
<span>Hello </span>
<span className="second-word-formatting">World!</span>
</div>
Añadirlos 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>
He estado tratando de pensar en una buena convención para usar al colocar texto junto a los 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 html limpio sin u otro marcado extraño. Crea menos nodos de texto que usando {'' ''} , y permite el uso de entidades html donde {'' hello & goodbye ''} {'' hello & goodbye ''} hace n
No es necesario insertar o envuelve tu 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> 
<span>{this.props.fullName}</span>
</form>
Puede utilizar llaves como una 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 puedes usar & nbsp como abajo
<span>sample text <span>
También puede usar & nbsp en dangerouslySetInnerHTML al imprimir contenido html
<div dangerouslySetInnerHTML={{__html: ''sample html text: ''}} />
Puedes usar literales de plantilla :
{` `} // Notice this sign " ` ",its not normal quotes.
Podemos usar literales con expresiones (código dentro de llaves):
`${2 * a + b}.?!=-`
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 añadir 5 espacios:
Hello <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 más tarde.
utilice {} o {``} o para crear espacio entre el elemento span y el contenido.
<b> {notif.name} </b> <span id="value"> { notif.count }{``} </span>