Reaguj na wyświetlanie linii podziału z zapisanego textarea

Question

Korzystanie z Facebooka React. Na stronie ustawień mam multilinię textarea, w której użytkownik może wprowadzić tekst wielowierszowy (w moim przypadku adres).

<textarea value={address} /> 

Kiedy próbuję wyświetlić adres, więc coś {address}, to nie pokazuje podziały wiersza i to wszystko w jednym wierszu.

<p>{address}</p> 

Wszelkie pomysły na rozwiązanie tego problemu?

Answer 1

Nie ma powodu, aby używać JS. Można łatwo powiedzieć przeglądarkę jak radzić przełamane przy użyciu właściwości white-space CSS:

white-space: pre-line; 

pre-line

Sekwencje spacji są zwinięte. Linie są łamane pod nowymi znakami , pod numerem <br> i, jeśli to konieczne, w celu wypełnienia pól liniowych.

Sprawdź to demo:

<style> 
 
    #p_wrap { 
 
    white-space: pre-line; 
 
    } 
 
</style> 
 

 
<textarea id="textarea"></textarea> 
 
<p id="p_standard"></p> 
 
<hr> 
 
<p id="p_wrap"></p> 
 
<script> 
 
    textarea.addEventListener('keypress', function(e) { 
 
    p_standard.textContent = e.target.value 
 
    p_wrap.textContent = e.target.value 
 
    }) 
 
</script>

Answer 2

to należy się spodziewać, że trzeba konwertować nowej linii (\ n) znaków na linię HTML łamie

artykuł o używaniu go w reakcji: https://medium.com/@kevinsimper/react-newline-to-break-nl2br-a1c240ba746#.l9sbqp5aw

Cytując artykuł:

bo wiesz, że wszystko jest w React funkcje, tak naprawdę nie można zrobić tego

this.state.text.replace(/(?:\r\n|\r|\n)/g, '<br />') 

Si nce, która zwróci ciąg znaków z węzłami DOM wewnątrz, co nie jest dozwolone, ponieważ musi być tylko ciągiem znaków.

wtedy może spróbować zrobić coś takiego:

{this.props.section.text.split(“\n”).map(function(item) { 
    return (
    {item} 
    <br/> 
) 
})}  

Tego nie wolno albo dlatego ponownie React jest czyste funkcje i dwie funkcje mogą być obok siebie.

tldr. Rozwiązanie:

{this.props.section.text.split(“\n”).map(function(item) { 
    return (
    <span> 
     {item} 
     <br/> 
    </span> 
) 
})} 

Teraz pakujemy każdą przerwę linii w rozpiętości, a to działa dobrze, ponieważ span ma wbudowany wyświetlacz. Teraz mamy działające rozwiązanie łamania linii nl2br.

Answer 3

Rozwiązaniem jest ustawić właściwość white-space na elemencie wyświetlając zawartość swojej textarea:

white-space: pre-line;