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


96

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>

1
Você não precisa de extensão extra, o React corrigiu problemas de longa data com nós de texto e seu segundo exemplo está bom
Dominic

1
Não sei se existe uma "prática recomendada" definida - certamente você não precisa envolver tudo em <span>tags, mas geralmente só sigo práticas HTML genéricas quando me preocupo com espaços em branco.
arthurakay

Respostas:


110

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>

15

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

Se o contêiner for flexível, você precisará desta solução.
Curtis

Este é o único não & nbsp; solução que funcionou para mim!
Magnus

@Magnus De nada, meu. Nenhuma das soluções para essa resposta realmente funcionou para meu caso especial.
i_code

10

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.

Em qual versão do React isso funciona para você? 15.6.2 parece ignorar isso.
smhg

1
@smhg yo. não depende da versão do react. seu feautere de ecmascript, datilografado. Você pode digitar seu modelo no console do Chrome para testar se o seu modelo está ok. O problema pode estar nas configurações do babel também.
Vasyl Gutnyk

1
Você está confundindo literais de modelo com expressões JSX. Para adicionar um espaço via JSX, basta colocar uma string consistindo em um caractere de espaço em uma expressão JSX . A maneira mais simples de fazer isso é {' '}. Você não precisa de literais de modelo para isso, embora eles funcionem (e funcionam {" "}).
Dan Dascalescu

sim, foi um erro de digitação um pouco confuso - corrigido. De qualquer forma, tenho certeza, 99,9% das pessoas aqui estão procurando por modelos literais :)
Vasyl Gutnyk

6

Eu costumo usar &nbsp;

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.


6
Não consigo imaginar na prática o que seria um uso de 5 espaços ininterruptos que tipograficamente faça sentido, mas fora esse caso, é errado usar na prática. Se você estiver usando isso para layout, deve usar CSS e, se precisar adicionar um espaço, mas não exigir que seja ininterrupto, há muitos outros espaços que fazem mais sentido tipográfico. Veja esta pergunta, por exemplo: stackoverflow.com/questions/8515365/…
guioconnor

2
@guioconnor tente estender sua imaginação e pense em um aplicativo editor, por exemplo, vscode, e você descobrirá que faz sentido tipográfico completo: D.
Dan

6

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 &nbsp;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 &amp; goodbye '}não.


4

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

Insira um espaço regular como entidade HTML

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

Nota lateral: hoje me deparei com isso como mais bonito foi quebrar meu código formatando a entidade espacial. Quando você usa {""}, ele funciona em uma linha por si só e não quebra.
gorhawk

Eu estava entrando para adicionar isso à minha própria resposta. Em vez disso, votei a favor do seu.
indefinido de

4

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;'}} />

2

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

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

1
nbsp = Espaço não quebrável, que é um caractere Unicode diferente do espaço regular e restringe a quebra de linha. Às vezes, isso é desejável, apenas apontando que não é equivalente às outras opções.
Beni Cherniavsky-Paskin

0

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

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

Isso oferece apenas separação visual, não semântica. Se você copiar o resultado, ainda estará obtendo AB, não A B.
ΔO 'deltazero'
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.