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

Odpowiedzi:

234

Zamiast używać &nbsp;encji HTML, możesz użyć znaku Unicode, który &nbsp;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