ReactJS отображает строку с неразрывными пробелами
у меня есть некоторые реквизиты, которые имеют строку, которая может содержать символы, такие как &.
Он также содержит пробелы. Я хочу заменить все пробелы на
.
есть ли простой способ сделать это? Имейте в виду, что я не могу просто визуализировать, используя следующий синтаксис:
<div dangerouslySetInnerHTML={{__html: myValue}} />
потому что сначала мне придется заменить любые HTML-объекты их разметкой. Я не хочу этого делать, это кажется слишком низким уровнем.
есть ли способ сделать это?
4 ответов
вместо
HTML entity, вы можете просто использовать символ неразрывного пробела Unicode:
<div>{myValue.replace(/ /g, "\u00a0")}</div>
Я знаю, что это старый вопрос, и это не совсем то, что вы просили, но вместо того, чтобы редактировать строку, то, что вы хотите достичь, вероятно, будет решаться лучше с помощью CSS :
в html:
<div style="white-space: nowrap">This won't break lines</div>
в react:
<div style={{ whiteSpace: 'nowrap' }}>{myValue}</div>
Если вы хотите отобразить довольно xml:
var str = "<test>\n\t\t<value>1</value>\n</test>\n".replace(/</g, '<').replace(/>/g, '>').replace(/\t/g, "\u00a0").replace(/\n/g, '<br/>');
return (
<div dangerouslySetInnerHTML={{__html: str}} ></div>
)
таким образом, у вас есть значение, подобное этому "Hello world", и мы скажем, что это в this.props.value
.
вы можете сделать это:
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}> </span>);
}
// remove the trailing nbsp
array.pop();
return <div>{array}</div>;