Jak wyrenderować wielowierszowy ciąg tekstowy w React

Załóżmy, że mam ciąg tekstowy zawierający znaki końca wiersza i renderuję go w następujący sposób:

render() {
    var text = "One\nTwo\nThree";
    return <div>{text}</div>;
}

W HTML znaki końca linii nie są renderowane jako znaki końca linii. Jak mam to zrobić w React? Nie chcę konwertować na <br>tagi i używać dangerouslySetInnerHTML. Czy jest inny sposób?

Możesz spróbować umieścić elementy div dla każdej linii

render() {
    return (<div>
        <div>{"One"}</div>
        <div>{"Two"}</div>
        <div>{"Three"}</div>
    </div>);
}

Lub

render() {
    var text = "One\nTwo\nThree";
    return (
    <div>
        {text.split("\n").map((i,key) => {
            return <div key={key}>{i}</div>;
        })}
    </div>);
}

Utwórz nową klasę CSS

.display-linebreak {
  white-space: pre-line;
}

Wyświetl swój tekst z tą klasą CSS

render() {
  const text = 'One \n Two \n Three';
  return ( 
     <div className="display-linebreak"> 
        {text} 
     </div>
  );
}

Renderuje ze znakami końca linii (sekwencje białych znaków zostaną zwinięte w jedną białą spację. W razie potrzeby tekst będzie zawijany). Lubię to:

One
Two
Three

Możesz również rozważyć wstępne zawijanie. Więcej informacji tutaj ( właściwość odstępu CSS ).

Możesz użyć właściwości CSS „white-space: pre”. Myślę, że to najłatwiejszy sposób radzenia sobie z tym.

Tutaj najczystsze rozwiązanie (afaik):

   render(){
      return <pre>
             Line 1{"\n"}
             Line 2{"\n"}
             Line 3{"\n"}
      </pre>
   }

Zamiast you możesz również użyć <div style={{whiteSpace:"pre"}}>lub dowolnego innego elementu bloku html (takiego jak spanlub pz tym atrybutem stylu)

Spróbuj tego,

render() {
    var text = "One\nTwo\nThree";
    return <div style={{whiteSpace: 'pre-line'}}>{text}</div>;
}

Renderuj rozdzielony tekst „Moja linia pierwsza \ nMoja druga linia \ nWhatvs ...” w normalnym obszarze tekstowym HTML. Wiem, że to działa, ponieważ właśnie go dzisiaj użyłem! Spraw, aby obszar tekstu był czytany tylko wtedy, gdy musisz, i stosownie do niego styl.

Możesz użyć -webkit-user-modify: read-write-plaintext-only;w swoim div. Na przykład sformatuje i zrozumie takie rzeczy, jak \ n i \ p.

Możesz skorzystać z tagu textarea w html, później możesz dodać styl do tagu textarea. Prawie rozwiązuje wszystkie problemy, w tym podziały wierszy i spacje tabulatorów. Cheerzz ...

np .: Twój render będzie wyglądał jak poniżej

render() {
    var text = "One\nTwo\nThree";
    return <textarea>{text}</textarea>;
}

Wynik:

One
Two
Three

Możesz bezpiecznie uruchomić String.rawzamiast tego dla tego typu wartości.

const text = String.raw`One
Two
Three
`

render() {
  return <div style={{ whiteSpace: "pre" }}>{text}</div>
}

Możesz także po prostu użyć <pre>tagu, który skutecznie robi to samo, ale jest mniej semantycznie jasny, jeśli używasz go już do innych celów w swojej aplikacji.

<div style={{ whiteSpace: "break-spaces" }}> {JSON.stringify(state, null, " ")} </div>