So rendern Sie eine mehrzeilige Textzeichenfolge in React

Angenommen, ich habe eine Textzeichenfolge, die Zeilenumbrüche enthält, und ich rendere sie folgendermaßen:

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

In HTML werden die Zeilenumbrüche nicht als Zeilenumbrüche dargestellt. Wie soll ich das in React machen? Ich möchte nicht in <br>Tags konvertieren und verwenden dangerouslySetInnerHTML. Gibt es eine andere Art und Weise?

Sie könnten versuchen, divs für jede Zeile zu setzen

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

Oder

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

Erstelle eine neue CSS-Klasse

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

Zeigen Sie Ihren Text mit dieser CSS-Klasse an

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

Rendern mit Zeilenumbrüchen (Sequenzen von Leerzeichen werden zu einem einzelnen Leerzeichen zusammengefasst. Text wird bei Bedarf umgebrochen). So was:

One
Two
Three

Sie können auch Pre-Wrap in Betracht ziehen. Weitere Informationen hier ( CSS White-Space-Eigenschaft ).

Sie können die CSS-Eigenschaft "white-space: pre" verwenden. Ich denke, dies ist der einfachste Weg, damit umzugehen.

Hier die sauberste Lösung (afaik):

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

Anstelle von können Sie auch verwenden <div style={{whiteSpace:"pre"}}> oder ein anderes HTML-Blockelement verwenden (wie spanoder pmit diesem Stilattribut)

Probier diese,

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

Rendern Sie Ihren abgegrenzten Text "Meine Zeile eine \ nMeine zweite Zeile \ nWhatevs ..." in einem normalen HTML-Textbereich. Ich weiß, dass es funktioniert, weil ich es heute gerade benutzt habe! Machen Sie den Textbereich nur lesbar, wenn Sie müssen, und formatieren Sie ihn entsprechend.

Sie können -webkit-user-modify: read-write-plaintext-only;in Ihrem div verwenden. Es formatiert und versteht beispielsweise Dinge wie \ n und \ p.

Sie können das Textarea-Tag von HTML verwenden. Später können Sie das Styling zum Textarea-Tag hinzufügen. Es löst so ziemlich alle Probleme, einschließlich Zeilenumbrüche und Tabulatoren. Cheerzz ...

Beispiel: Ihr Render sieht ungefähr so ​​aus wie unten

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

Ausgabe:

One
Two
Three

Sie können String.rawstattdessen sicher für diesen Werttyp ausgeführt werden.

const text = String.raw`One
Two
Three
`

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

Sie können auch einfach ein <pre>Tag verwenden, das effektiv dasselbe tut, aber es ist weniger semantisch klar, wenn Sie es bereits für andere Zwecke in Ihrer App verwenden.

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