ReactJS визуализирует строку с неразрывными пробелами

у меня есть некоторые реквизиты, которые имеют строку, которая может содержать символы, такие как &. Он также содержит пробелы. Я хочу заменить все пробелы на  .

есть простой способ я могу это сделать? Имейте в виду, что я не могу просто визуализировать, используя следующий синтаксис:

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

потому что сначала мне придется заменить любые HTML-объекты их разметкой. Я не хочу этого делать, это кажется слишком низким уровнем.

есть ли способ я могу это сделать?

4 69
html reactjs

4 ответа:

вместо &nbsp; HTML entity, вы можете просто использовать Unicode неразрывный пробел:

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

Я знаю, что это старый вопрос, и это не совсем то, что вы просили, но вместо того, чтобы редактировать строку, то, что вы хотите достичь, вероятно, будет решена лучше с помощью CSS :

в html:

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

в React:

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

Если вы хотите отобразить довольно 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

таким образом, у вас есть значение, подобное этому "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}>&nbsp;</span>);
}

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

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

jsbin

-3