web-dev-qa-db-fra.com

ReactJS rend la chaîne avec des espaces insécables

Certains accessoires contiennent une chaîne pouvant contenir des caractères tels que & . Elle contient également des espaces. Je veux remplacer tous les espaces par  .

Y a-t-il un moyen facile de faire cela? Gardez à l'esprit que je ne peux pas simplement utiliser le rendu avec cette syntaxe:

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

parce que je devrais d’abord remplacer les entités HTML par leurs balises. Je ne veux pas avoir à faire ça, ça semble trop bas.

Est-ce qu'il y a un moyen de faire ça?

htmlreactjs
71
Jack Allan

Au lieu d'utiliser l'entité HTML &nbsp;, vous pouvez simplement utiliser le caractère d'espace insécable Unicode:

<div>{myValue.replace(/ /g, "\u00a0")}</div>
176
Sophie Alpert

Je sais que c’est une vieille question et que cela ne fait pas exactement ce que vous avez demandé. Plutôt que d’éditer la chaîne, ce que vous voulez réaliser est probablement mieux résolu avec l’attribut CSS white-space: nowrap:

En html:

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

En réaction:

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

Eh bien, c'est très difficile de taper ici sans que cela disparaisse, alors j'ajoute un petit espace pour que tout le monde puisse le voir. Si vous supprimez les espaces de cette balise <nbsp />, vous pourrez utiliser un espace insécable dans React.

React traduit cette balise JSX en un espace insécable. Bizarrerie bizarre: Cela doit également être utilisé sur la même ligne que le texte que vous voulez espacer. De plus, les espaces insécables avec cette balise ne se superposent pas dans React.

0
Ryan Berdel

Si vous voulez afficher un joli 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>
)
0
Tommy

Pour supprimer l'espace entre les chaînes, le code ci-dessous fonctionne pour moi. par exemple: "afee dd" résultat: "afeedd"

0
Raj