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

88

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

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

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

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

Как я могу это сделать?

html reactjs Джек Аллан
источник
1
почему это связано с реакцией?
Марсело Безерра
1
Не совсем понятно, чем вы хотите заниматься. Вы хотите просто заменить все пробелы на &nbspl;, вы хотите отображать HTML-теги буквально или вы хотите что-то еще сделать?
Bojangles
Это зависит от того, когда myValue доступно. Вы можете дождаться его в соответствующей функции жизненного цикла, проанализировать его и установить parsedфлаг, предотвращающий многократный синтаксический анализ.
Дэвид Хеллсинг
если вы хотите отобразить & nbsp; unescaped в dom с помощью response, вам нужно будет использовать этот dangerouslySetInnerHTMLметод. Я действительно не вижу способа обойти это, поскольку вы можете использовать javascript для создания строки, заменяющей пробелы на & nbsp; но без использования dangerouslySetInnerHTMLметода они будут экранированы с помощью реакции.
Майк Драйвер,

Ответы:

234

Вместо использования &nbsp;объекта HTML вы можете использовать символ Unicode, который &nbsp;относится к (U + 00A0 NON-BREAKING SPACE):

<div>{myValue.replace(/ /g, "\u00a0")}</div>
Софи Альперт
источник
3
Обратите внимание, что используемый выше символ Юникода попадает в черный список браузеров из-за злоупотребления фишинговыми схемами. См. Kb.mozillazine.org/Network.IDN.blacklist_chars
Перри Тью
2
@BenAlpert Хорошее замечание. Да. Очень хороший момент. Просто адреса IDN, насколько мне известно.
Перри Тью
простой, но эффективный. спасибо @BenAplert даже после 3 лет публикации.
YASH DAVE
Это сработало для меня, когда ничего не помогло. Спасибо за помощь!
Давидавад
2
Этот черный список относится к доменным именам, а не к HTML-коду.
JW.
34

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

В html:

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

В ответ:

<div style={{ whiteSpace: 'nowrap' }}>{myValue}</div>
Адриан Макнейл
источник
Спасибо! Это лучший ответ. И в моем случае (куча ссылок, которые я не хочу переносить, но я также не хочу в одной строке), я добавил :: after {content: ''; бело-пространстве: нормальный}
чад Steele
0

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

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

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

Райан Бердел
источник
Не работает:Warning: The tag <nbsp> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter
Росс Аттрилл,
0

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

{myValue.replace (/ \ s + / g, '')}
Радж
источник
-4

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

Разбойник
источник