Chaîne de rendu ReactJS avec des espaces insécables

88

J'ai des accessoires qui ont une chaîne qui pourrait contenir des caractères tels que &. Il contient également des espaces. Je souhaite remplacer tous les espaces par  .

Y a-t-il un moyen simple de le faire? Gardez à l'esprit que je ne peux pas simplement effectuer le rendu en utilisant cette syntaxe:

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

car je devrais d'abord remplacer toutes les entités HTML par leur balisage. Je ne veux pas avoir à faire ça, ça me paraît trop bas niveau.

Est-ce que je peux faire ça?

html reactjs Jack Allan
la source
1
pourquoi est-ce lié à réagir?
Marcelo Bezerra
1
Ce que vous voulez faire n'est pas tout à fait clair. Voulez-vous simplement remplacer tous les espaces par &nbspl;, voulez-vous afficher les balises HTML littéralement ou voulez-vous faire autre chose?
Bojangles
Cela dépend du moment où myValue est accessible. Vous pouvez l'attendre dans la fonction de cycle de vie appropriée, l'analyser et définir un parsedindicateur qui empêche l'analyse multiple.
David Hellsing
si vous souhaitez rendre & nbsp; sans échapper au dom avec react, vous devrez utiliser la dangerouslySetInnerHTMLméthode. Je ne vois pas vraiment de solution car vous pouvez utiliser javascript pour créer une chaîne en remplaçant les espaces par & nbsp; mais sans utiliser la dangerouslySetInnerHTMLméthode, ceux-ci seront échappés par react.
Mike Driver

Réponses:

234

Au lieu d'utiliser l' &nbsp;entité HTML, vous pouvez utiliser le caractère Unicode qui &nbsp;fait référence à (U + 00A0 NON-BREAKING SPACE):

<div>{myValue.replace(/ /g, "\u00a0")}</div>
Sophie Alpert
la source
3
Veuillez noter que le caractère Unicode que vous utilisez ci-dessus est mis sur liste noire par les navigateurs en raison de son utilisation abusive par des stratagèmes de phishing. Voir kb.mozillazine.org/Network.IDN.blacklist_chars
Perry Tew
2
@BenAlpert Bon point. Oui. Très bon point. Juste des adresses IDN à ma connaissance.
Perry Tew
simple mais efficace. thx @BenAplert même après 3 ans de publication.
YASH DAVE
Cela a fonctionné pour moi quand rien d'autre n'a fonctionné. Merci pour l'aide!
davidawad
2
Cette liste noire s'applique aux noms de domaine, pas au code HTML.
JW.
34

Je sais que c'est une vieille question, et cela ne fait pas exactement ce que vous avez demandé, mais plutôt que de modifier la chaîne, ce que vous voulez obtenir est probablement mieux résolu en utilisant le CSS white-space: nowrap attribut :

En html:

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

En réaction:

<div style={{ whiteSpace: 'nowrap' }}>{myValue}</div>
Adrian Macneil
la source
Merci! C'est la meilleure réponse. Et dans mon cas (un tas de liens que je ne veux pas emballer, mais je ne veux pas non plus sur une seule ligne), j'ai ajouté un :: after {content: ''; white-space: normal}
chad steele
0

Si vous souhaitez 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>
)
Tommy
la source
0

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

React traduit cette balise JSX en un espace insécable. Bizarre bizarrerie: cela doit également être utilisé sur la même ligne que le texte que vous souhaitez espacer. De plus, les espaces insécables avec cette balise ne s'empilent pas dans React.

Ryan Berdel
la source
Ne fonctionne pas: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 le
0

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

{maValeur.replace (/ \ s + / g, '')}
Raj
la source
-4

Vous avez donc une valeur comme celle-ci "Hello world", et nous dirons que c'est dans this.props.value .

Tu peux le faire:

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
la source