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

Вместо использования  объекта HTML вы можете использовать символ Unicode, который  относится к (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

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