ReactJS renderuje ciąg znaków z nierozdzielającymi spacjami

88

Mam kilka właściwości, które mają ciąg znaków, który może zawierać znaki, takie jak &. Zawiera również spacje. Chcę zamienić wszystkie spacje na  .

Czy mogę to zrobić w łatwy sposób? Pamiętaj, że nie mogę po prostu renderować przy użyciu tej składni:

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

ponieważ najpierw musiałbym zamienić wszystkie encje HTML na ich znaczniki. Nie chcę tego robić, wydaje mi się, że poziom jest zbyt niski.

Czy jest sposób, w jaki mogę to zrobić?

html reactjs

— Jack Allan
źródło

1

dlaczego ma to związek z reagowaniem?

— Marcelo Bezerra

1

Nie jest do końca jasne, co chcesz robić. Czy chcesz po prostu zamienić wszystkie spacje na &nbspl;, chcesz dosłownie wyświetlać tagi HTML, czy jest coś innego, co chcesz zrobić?

— Bojangles

To zależy od tego, kiedy myValue jest dostępny. Możesz poczekać na to w odpowiedniej funkcji cyklu życia, przeanalizować go i ustawić parsedflagę, która zapobiega wielokrotnemu analizowaniu.

— David Hellsing

jeśli chcesz renderować & nbsp; bez zmiany znaczenia do domeny z odpowiedzią, będziesz musiał użyć tej dangerouslySetInnerHTMLmetody. Naprawdę nie widzę sposobu na obejście tego problemu, ponieważ możesz użyć javascript do utworzenia ciągu znaków zastępującego spacje przez & nbsp; ale bez użycia dangerouslySetInnerHTMLmetody zostaną one omówione przez reakcję.

— Mike Driver

234

Zamiast używać  encji HTML, możesz użyć znaku Unicode, który  odnosi się do (U + 00A0 SPACJA NIEŁAMANA):

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

— Sophie Alpert
źródło

3

Zwróć uwagę, że znak Unicode, którego używasz powyżej, znajduje się na czarnej liście przeglądarek z powodu nadużyć w ramach phishingu. Zobacz kb.mozillazine.org/Network.IDN.blacklist_chars

— Perry Tew

2

@BenAlpert Słuszna uwaga. Tak. Bardzo dobra uwaga. Tylko adresy IDN zgodnie z moją wiedzą.

— Perry Tew

proste, ale skuteczne. thx @BenAplert nawet po 3 latach postu.

— YASH DAVE

To działało dla mnie, gdy nic innego nie działało. Dzięki za pomoc!

— davidawad

2

Ta czarna lista dotyczy nazw domen, a nie kodu HTML.

— JW.

34

Wiem, że to stare pytanie i nie robi to dokładnie tego, o co prosiłeś, ale zamiast edytować ciąg, to, co chcesz osiągnąć, prawdopodobnie lepiej rozwiązuje się za pomocą white-space: nowrapatrybutu CSS :

W html:

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

W odpowiedzi:

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

— Adrian Macneil
źródło

Dziękuję Ci! To jest lepsza odpowiedź. A w moim przypadku (kilka linków, których nie chcę zawijać, ale też nie chcę w jednej linii) dodałem :: after {content: ''; white-space: normal}

— chad steele

0

Jeśli chcesz wyświetlić ładny 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>
)

— Tommy
źródło

0

Cóż, bardzo trudno jest tu pisać bez znikania, więc dodaję małą spację, aby wszyscy mogli to zobaczyć. Jeśli usuniesz białe znaki z tego tagu <nbsp />, będziesz mógł użyć nierozdzielającej spacji w Reakcie.

React tłumaczy ten tag JSX na nierozerwalną przestrzeń. Dziwne dziwactwo: należy go również użyć w tym samym wierszu, co tekst, który chcesz wstawić. Ponadto nierozdzielające spacje z tym tagiem nie kumulują się w Reakcie.

— Ryan Berdel
źródło

Nie działa:

Warning: The tag <nbsp> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter

— Ross Attrill

0

Aby usunąć spację między ciągiem, poniższy kod działa dla mnie. np .: „afee dd”, wynik: „afeedd”

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

— Raj
źródło

-4

Masz więc wartość taką jak „Witaj, świecie” i powiemy, że jest w środku this.props.value.

Możesz to zrobić:

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

— Bandyta
źródło