parser - react render html

ReactJS renderiza cadenas con espacios sin interrupciones

Question

Tengo algunos accesorios que tienen una cadena que podría contener caracteres como &. También contiene espacios. Quiero reemplazar todos los espacios con   .

¿Hay alguna manera fácil de hacerlo? Tenga en cuenta que no puedo simplemente renderizar usando esta sintaxis:

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

porque primero tendría que reemplazar cualquier entidad HTML con su marca. No quiero tener que hacer esto, parece muy bajo nivel.

¿Hay alguna manera de que pueda hacer esto?

Answer 1

En lugar de usar el   Entidad HTML, simplemente puede usar el carácter espacio no disruptivo Unicode:

<div>{myValue.replace(/ /g, "/u00a0")}</div>

Answer 2

Entonces tiene un valor como este "Hola mundo", y diremos que está en this.props.value .

Puedes hacerlo:

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

Answer 3

Sé que esta es una vieja pregunta, y esto no hace exactamente lo que pediste, pero en lugar de editar la cadena, lo que quieres lograr probablemente se resuelva mejor usando el CSS white-space: nowrap atributo white-space: nowrap :

En html:

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

En reaccionar:

<div style={{ whiteSpace: ''nowrap'' }}>{myValue}</div>

Answer 4

Si quieres mostrar un bonito xml:

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>
)