ReactJS renderiza string com espaços ininterruptos

87

Eu tenho alguns adereços que tem uma string que pode conter caracteres como &. Ele também contém espaços. Desejo substituir todos os espaços por  .

Existe uma maneira fácil de fazer isso? Lembre-se de que não posso apenas renderizar usando esta sintaxe:

<div dangerouslySetInnerHTML={{__html: myValue}} />

porque primeiro eu teria que substituir quaisquer entidades HTML por sua marcação. Eu não quero ter que fazer isso, parece um nível muito baixo.

Existe uma maneira de fazer isso?

html reactjs Jack Allan
fonte
1
por que isso está relacionado a reagir?
Marcelo Bezerra
1
Não está totalmente claro o que você deseja fazer. Você deseja apenas substituir todos os espaços por &nbspl;, deseja exibir as tags HTML literalmente ou há outra coisa que deseja fazer?
Bojangles
Depende de quando myValue está acessível. Você pode esperar por ele na função de ciclo de vida apropriada, analisá-lo e definir um parsedsinalizador que evite análises múltiplas.
David Hellsing
se você deseja renderizar & nbsp; sem escape para o dom com react, você vai precisar usar o dangerouslySetInnerHTMLmétodo. Não vejo uma maneira de contornar isso, pois você pode usar javascript para criar uma string substituindo os espaços por & nbsp; mas sem usar o dangerouslySetInnerHTMLmétodo, eles escaparão por react.
Mike Driver de

Respostas:

233

Em vez de usar a &nbsp;entidade HTML, você pode usar o caractere Unicode que &nbsp;se refere a (U + 00A0 NON-BREAKING SPACE):

<div>{myValue.replace(/ /g, "\u00a0")}</div>
Sophie Alpert
fonte
3
Observe que o caractere Unicode que você está usando acima está na lista negra dos navegadores devido ao uso abusivo de esquemas de phishing. Consulte kb.mozillazine.org/Network.IDN.blacklist_chars
Perry Tew
2
@BenAlpert Bom argumento. Sim. Muito bom ponto. Apenas endereços IDN que eu saiba.
Perry Tew de
simples, mas eficaz. thx @BenAplert mesmo após 3 anos de postagem.
YASH DAVE
Isso funcionou para mim quando nada mais funcionou. Obrigado pela ajuda!
davidawad de
2
Essa lista negra se aplica a nomes de domínio, não ao código HTML.
JW.
34

Eu sei que esta é uma questão antiga, e isso não faz exatamente o que você pediu, mas em vez de editar a string, o que você deseja alcançar provavelmente será resolvido melhor usando o white-space: nowrapatributo CSS :

Em html:

<div style="white-space: nowrap">This won't break lines</div>

Em reação:

<div style={{ whiteSpace: 'nowrap' }}>{myValue}</div>
Adrian Macneil
fonte
Obrigado! Esta é a melhor resposta. E no meu caso (um monte de links que não quero agrupar, mas também não quero em uma linha), adicionei um :: after {content: ''; espaço em branco: normal}
chad steele
0

Se você deseja exibir um xml bonito: 

var str = "<test>\n\t\t<value>1</value>\n</test>\n".replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\t/g, "\u00a0").replace(/\n/g, '<br/>');
return (
    <div dangerouslySetInnerHTML={{__html: str}} ></div>
)
Tommy
fonte
0

Bem, é muito difícil digitar aqui sem que ele desapareça, então estou adicionando um pequeno espaço em branco para que todos possam ver. Se você remover o espaço em branco desta tag <nbsp />, poderá usar um espaço ininterrupto no React.

React traduz essa tag JSX em um espaço ininterrupto. Habilidade estranha: isso também deve ser usado na mesma linha do texto que você deseja espaçar. Além disso, os espaços não separáveis ​​com esta tag não se acumulam no React.

Ryan Berdel
fonte
Não funciona:Warning: The tag <nbsp> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter
Ross Attrill
0

Para remover o espaço entre as strings, o código abaixo funciona para mim. por exemplo: "afee dd" resultado: "afeedd"

{myValue.replace (/ \ s + / g, '')}
Raj
fonte
-4

Então você tem um valor como este "Olá, mundo", e diremos que está em this.props.value .

Você consegue fazer isso:

var parts = this.props.value.split(" "), array = [];
for (var i=0; i<parts.length; i++){
  // add the string
  array.push(<span key={i * 2}>{parts[i]}</span>);
  // add the nbsp
  array.push(<span key={i * 2 + 1}>&nbsp;</span>);
}

// remove the trailing nbsp
array.pop();

return <div>{array}</div>;

jsbin

Brigand
fonte