Рядок відтворення ReactJS з нерозривними пробілами

88

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

Чи є простий спосіб зробити це? Майте на увазі, що я не можу просто візуалізувати, використовуючи цей синтаксис:

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

тому що спочатку мені довелося б замінити будь-які HTML-сутності їх розміткою. Я не хочу цього робити, це здається занадто низьким рівнем.

Чи є спосіб зробити це?

html reactjs

— Джек Аллан
джерело

1

чому це пов'язано з реакцією?

— Марсело Безерра,

1

Не зовсім зрозуміло, чим ви хочете займатися. Ви хочете просто замінити всі пробіли на &nbspl;, ви хочете відображати теги HTML буквально або є щось інше, що ви хочете зробити?

— Bojangles

Це залежить від того, коли myValue доступний. Ви можете почекати його у відповідній функції життєвого циклу, проаналізувати його та встановити parsedпрапорець, який запобігає багаторазовому аналізу.

— Девід Хеллсінг,

якщо ви хочете зробити & nbsp; не виїжджаючи до будинку з реакцією, вам потрібно буде використовувати dangerouslySetInnerHTMLметод. Я насправді не бачу способу обійти це, оскільки ви можете використовувати javascript для створення рядка, який замінює пробіли на & nbsp; але без використання dangerouslySetInnerHTMLметоду вони будуть уникнути за допомогою реакції.

— Mike Driver

234

Замість того, щоб використовувати  сутність HTML, ви можете використовувати символ Unicode, який  посилається на (U + 00A0 НЕПРОБІЙНИЙ ПРОСТІР):

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

— Софі Альперт
джерело

3

Зверніть увагу, що символ Unicode, який ви використовуєте вище, перебуває у чорному списку браузерів через його зловживання фішинговими схемами. Дивіться kb.mozillazine.org/Network.IDN.blacklist_chars

— Perry Tew

2

@BenAlpert Гарна думка. Так. Дуже хороший момент. Просто IDN звертається до моїх знань.

— Перрі Тью,

простий, але ефективний. thx @BenAplert навіть після 3 років публікації.

— YASH DAVE

Це працювало для мене, коли нічого іншого не робило. Дякую за допомогу!

— davidawad

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: ''; white-space: normal}

— Чад

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

Отже, у вас є значення на зразок цього "Привіт світ", і ми скажемо, що воно є 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

— Бриганда
джерело