Prática recomendada ao adicionar espaços em branco em JSX

Eu entendo como (e por que ) adicionar um espaço em branco no JSX, mas estou me perguntando qual é a melhor prática ou se alguma faz alguma diferença real?

Envolva os dois elementos em um intervalo

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

Adicione-os em uma linha

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

Adicione espaço com JS

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

Porque &nbspfaz com que você tenha espaços não separáveis, você só deve usá-lo quando necessário. Na maioria dos casos, isso terá efeitos colaterais indesejados.

As versões mais antigas do React, acredito que todas as anteriores à v14, seriam inseridas automaticamente <span> </span>quando você tivesse uma nova linha dentro de uma tag.

Embora eles não façam mais isso, essa é uma maneira segura de lidar com isso em seu próprio código. A menos que você tenha um estilo que vise especificamente span(má prática em geral), este é o caminho mais seguro.

Por seu exemplo, você pode colocá-los em uma única linha, pois é muito curta. Em cenários de linhas mais longas, é assim que você provavelmente deve fazer:

  <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 também é seguro contra editores de texto de corte automático.

O outro método é usar o {' '}que não insere tags HTML aleatórias. Isso pode ser mais útil ao estilizar, destacar elementos e remover a desordem do DOM. Se você não precisa de compatibilidade com versões anteriores do React v14 ou anterior, este deve ser o seu 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>

Você pode usar o espaço em branco da propriedade css e configurá-lo para pré-empacotar para o elemento div de inclusão.

div {
     white-space: pre-wrap;
}

Você pode adicionar um espaço em branco simples com o sinal de aspas: {" "}

Além disso, você pode usar literais de modelo , que permitem inserir expressões embedd (código entre chaves):

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

Eu costumo usar  

Não é bonito, mas é a maneira menos confusa de adicionar espaços em branco que encontrei e me dá controle absoluto sobre a quantidade de espaços em branco que adiciono.

Se eu quiser adicionar 5 espaços:

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

É fácil identificar exatamente o que estou tentando fazer aqui quando volto ao código semanas depois.

Tenho tentado pensar em uma boa convenção para usar ao colocar texto próximo a componentes em linhas diferentes e encontrei algumas boas opções:

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

ou

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

Cada um deles produz html limpo sem  marcação adicional ou outra marcação estranha. Ele cria menos nós de texto do que usar {' '}e permite o uso de entidades html onde {' hello & goodbye '}não.

Você não precisa inserir  ou embrulhar seu espaço extra com <span/>. Basta usar o código de entidade HTML para espaço - 

Insira um espaço regular como entidade HTML

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

Você pode usar chaves como expressão com aspas duplas e aspas simples para espaço, ou seja,

{" "} or {' '}

Você também pode usar literais de modelo ES6, ou seja,

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

Você também pode usar & nbsp como abaixo (dentro do intervalo)

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

Você também pode usar & nbsp em dangerouslySetInnerHTML ao imprimir conteúdo html

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

use {} ou {``} ou  para criar espaço entre o elemento span e o conteúdo.

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

Se o objetivo é separar dois elementos, você pode usar CSS como abaixo:

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