Reaguj na podziały wierszy wyświetlania z zapisanego obszaru tekstowego

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

<textarea value={address} />

Kiedy próbuję wyświetlić adres, więc coś w stylu {address}, nie pokazuje podziałów linii i jest w jednej linii.

<p>{address}</p>

Jakieś pomysły, jak to rozwiązać?

Nie ma powodu, aby używać JS. Możesz łatwo powiedzieć przeglądarce, jak obsługuje znak nowej linii, używając white-spacewłaściwości CSS:

white-space: pre-line;

pre-line

Sekwencje białych znaków są zwinięte. Wiersze są przerywane w znakach nowej linii, w <br>i w razie potrzeby, aby wypełnić pola linii.

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>

Należy się tego spodziewać, trzeba by przekonwertować znaki nowego wiersza (\ n) na znaki końca wiersza HTML

Artykuł o używaniu go w React : React Newline to break (nl2br)

Aby zacytować artykuł:

Ponieważ wiesz, że wszystko w React jest funkcjami, nie możesz tego zrobić

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

Ponieważ zwróciłoby to łańcuch z węzłami DOM w środku, to też nie jest dozwolone, ponieważ musi to być tylko ciąg.

Następnie możesz spróbować zrobić coś takiego:

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

To też jest niedozwolone, ponieważ ponownie React jest czystymi funkcjami i dwie funkcje mogą znajdować się obok siebie.

tldr. Rozwiązanie

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

Teraz zawijamy każdy znak końca wiersza w rozpiętości i to działa dobrze, ponieważ rozpiętość ma wbudowany wyświetlacz. Teraz mamy działające rozwiązanie podziału wiersza nl2br

Rozwiązaniem jest ustawienie właściwości white-spacena elemencie wyświetlającym zawartość twojego textarea:

white-space: pre-line;

Poprzednia propozycja Pete'a z samodzielnym komponentem jest świetnym rozwiązaniem, chociaż brakuje w niej jednej ważnej rzeczy. Listy wymagają kluczy . Poprawiłem to trochę i moja wersja (bez ostrzeżeń konsoli) wygląda tak:

const NewLineToBr = ({ children = '' }) => children.split('\n')
  .reduce((arr, line, index) => arr.concat(
    <Fragment key={index}>
      {line}
      <br />
    </Fragment>,
  ), [])

Używa fragmentów React 16

Od React 16 komponent może zwracać tablicę elementów, co oznacza, że ​​możesz stworzyć komponent taki jak ten:

export default function NewLineToBr({children = ""}){
  return children.split('\n').reduce(function (arr,line) {
    return arr.concat(
      line,
      <br />
    );
  },[]);
}

którego możesz użyć w ten sposób:

<p>
  <NewLineToBr>{address}</NewLineToBr>
</p>

Uwielbiam wersję webit. Nie wiedziałem o komponencie Fragment, jest tak przydatny. Nie ma jednak potrzeby stosowania metody redukcji. Mapa wystarczy. Ponadto lista wymaga kluczy w reakcji, ale używanie indeksu z metody iteracyjnej jest złym nawykiem. eslint niszczył to w moim ostrzeżeniu, aż pojawił się błąd zamieszania. Więc wyglądałoby to tak:

const NewLine = ({ children }) =>
   children.split("\n").map(line => (
    <Fragment key={uuidv4()}>
      {line}
      <br />
    </Fragment>
  ));