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

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

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

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

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

Есть ли способ сделать это?

Ответы

Ответ 1

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

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

Ответ 2

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

В html:

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

В реакции:

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

Ответ 3

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

Ответ 4

Ну, здесь очень сложно набрать текст, чтобы он не исчез, поэтому я добавляю немного пробела, чтобы все могли его видеть. Если вы удалите пробел из этого тега <nbsp/>, то вы сможете использовать неразрывный пробел в React.

React переводит этот тег JSX в неразрывный пробел. Странная причуда: это также должно использоваться в той же строке, что и текст, который вы хотите поместить в пробел. Кроме того, неразрывные пробелы с этим тегом не складываются в React.

Ответ 5

Чтобы убрать пробел между строками, приведенный ниже код работает для меня. например: "afee dd" результат: "afeedd"

{myValue.replace(/\ s+/g, '')}

Ответ 6

Итак, у вас есть такое значение, как этот "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