& nbsp jsx não funciona


99

Estou usando a tag & nbsp em jsx e ela não está renderizando o espaço. A seguir está um pequeno trecho do meu código. Por favor, ajude.

var Reporting=React.createClass({

  render: function(){
    return(
      <div style={divPositionReporting}>
          <p>Pricing Reports</p>
          <hr></hr>
          Select Scenario:&nbsp;&nbsp;
          <select>
            <option></option>
          </select>
          <button type="button">Get Pricing Report</button>
          <br/>
          Select Takeout Scenario:&nbsp;
          <select>
            <option></option>
          </select>
          <button type="button">Get Pricing Report</button>
          <br/>
      </div>
    );
  },

});

Você pesquisou? Primeiro acesso: google.com/search?q=react+html+entities
Felix Kling

Não acho que haja algo errado com seu código. Qual versão do Babel e do React está usando? Certifique-se de usar as versões mais recentes. Você pode ver na resposta do Babel que o código gerado contém caracteres de espaço em branco ininterruptos.
Felix Kling

Bem, agora o primeiro hit é este. :) duckduckgo.com/?q=jsx+nbsp
Marc Stober

Respostas:


200

Veja: JSX em profundidade

Experimentar: Select Scenario:{'\u00A0'}

Ou: <div dangerouslySetInnerHTML={{__html: 'Select Scenario: &nbsp;'}} />

Ou: <div>&nbsp;</div>

jsfiddle

Atualizar

Depois de ver alguns dos comentários e experimentar. Chegou ao meu conhecimento que usar entidades html dentro de JSX funciona bem (ao contrário do que é declarado na referência jsx-gotchas acima [talvez esteja desatualizado]).

Então, usando algo como R&amp;D:, produziria: 'R&D'. Há um comportamento estranho com &nbsp;, que faz com que seja renderizado de forma diferente, fazendo-me pensar que não funciona:

<div>This works simply:-&nbsp;-</div>
<div>This works simply:- {'\u00A0'}-</div>

Produz:

This works simply:- -
This works simply:-  -

8
Portanto, a resposta é usar o valor Unicode correspondente à entidade html e usá-lo dentro de uma string javascript. Obrigado pela ajuda.
Indraneel Bende

@IndraneelBende &nbsp;deve funcionar bem. Há algum problema com o valor no atributo de estilo.
Gaurav Kumar de

@Gaurav Kumar, eu também tentei não funcionou, é apenas ignorado. Você poderia acrescentar algo ao violino em minha resposta?
omerts de

1
<div>Doesn't work: -&nbsp;-</div>funciona muito bem para mim. editar: Bem, não parece ser um espaço ininterrupto.
Felix Kling

Mmh, produz a saída esperada no próprio site do React ...
Felix Kling

17

Escreva seu jsxcódigo agrupado { }conforme mostrado abaixo.

<h1>Code {' '}</h1>

Você pode colocar espaço ou qualquer caractere especial aqui.

por exemplo, no seu caso

Select Takeout Scenario:&nbsp;

deveria ser assim

Select Takeout Scenario:{' '}

Vai funcionar.

Como Conselho você não deve usar &nbsppara adicionar espaço extra, você pode usar css para conseguir o mesmo.


2
Isso é apenas para adicionar espaços em branco, mas não funcionará para outras entidades html
omemete

5
Isso não é uma não-quebra espaço embora.
TimoSolo

1
@TimoSolo Eu não encorajo você a usar & nbsp ou a técnica mencionada acima. Você pode tentar a primeira resposta se a minha não estiver funcionando. Obrigado.
WitVault

"use css para obter o mesmo" - você pode estar usando um espaço sem quebra para que seu texto não caia para a próxima linha e fora do limite do elemento que contém o texto. Se você quiser usar as propriedades CSS para fazer isso, uma maneira de fazer isso é text-overflow: "clip"; overflow: "hidden";. Existem algumas variações disponíveis.
Dan Cron,


4

Se isso não funcionar para você {' '}, use {'\u00A0'}.

{' '}irá renderizar um espaço, mas há alguns casos em que você deseja que a altura da linha também seja renderizada, em um caso em que você deseja um espaço dentro de um elemento HTML que não tem outro texto, ou seja:, <span style={{ lineHeight: '1em' }}>{' '}</span>nesse caso você precisará usar {'\u00A0'}dentro de span ou elemento HTML.


1

Tente usar utf-8 nbsp, parece um espaço simples, mas funcionando bem sem código extra.

Talvez você deva criar uma variável para isso.

Para copiar símbolos: https://unicode-table.com/en/00A0/

Para gerar textos automaticamente, use algum typograf.


0

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

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

O que essa resposta tem a ver com entidades html?
boatcoder
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.