So rendern Sie eine mehrzeilige Textzeichenfolge in React

87

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?

Aaron Beall
quelle
Wenn Sie verwendet haben <br>, könnte dies das Problem sein. Ich habe festgestellt, dass JS Transformer es nur mag, wenn Sie die <br/>HTML 4-Version verwenden.
Steviesama
Verwenden Sie Klammern um beide Zeilen, um einer Variablen zwei Zeilen React-Code zuzuweisen. ()
Vael Victus
1
Ich habe dies mit Pre-Wrap behoben. Hier ist meine Antwort auf eine ähnliche Frage: stackoverflow.com/a/55466235/5346095
JS dev

Antworten:

73

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>);
}
Sergio Flores
quelle
5
Ich mag das. Ich denke, ich könnte auch eine <MultilineText>Komponente daraus machen !
Aaron Beall
13
Warum sollten Sie <div>Textzeilen formatieren? <p>scheint semantisch korrekter.
Kost
1
Ist das ernsthaft so, wie damit umgegangen werden soll? Ich verstehe, dass dies funktioniert, aber dies führt zu einem Durcheinander im Markup. Was ist, wenn der Benutzer diesen Text kopieren möchte? Um fair zu sein, liegt der Fehler hier in der Handhabung von React und nicht in Ihrer Lösung. Dies mag die beste Option sein, aber wow.
Kevincoleman
1
Denken Sie nicht einmal darüber nach, wie Sie mit HTML umgehen können. Die mit Abstand beste Lösung besteht darin, die Divs zu erstellen, BR-Tags oder Blockspans zu setzen. Meiner Meinung nach ist dies das gleiche Szenario für HTML / React.
Sergio Flores
242

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 ).

andersvold
quelle
2
Dies ist eine großartige Alternative zu der Antwort, die ich akzeptiert habe und die die positiven Stimmen verdient, aber ich sollte erwähnen, dass ich es versucht habe und Probleme mit Layout / Überlauf / Rendering hatte. Keine der Whitespace-Optionen schien in allen Fällen richtig zu funktionieren, in denen ich zu diesem Zeitpunkt eine Korrektur benötigte, während die akzeptierte Antwort dies tat.
Aaron Beall
1
Mit Sicherheit die beste Antwort. Fügen Sie einfach das CSS hinzu und Sie müssen keine Karte oder etwas anderes verwenden. Vielen Dank.
Frederiko Cesar
26

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

Ziegel Yang
quelle
Beste Antwort, imo: Dies ist ein Problem der Anzeige, daher sollte es idealerweise in CSS behandelt werden (nicht durch Ändern des HTML-Codes)
Bogdan D
12
white-space:prehatte den gleichen Effekt wie white-space:nowrapbei mir, dh der Text lief über seinen Container. Verwenden Sie white-space:pre-wrapstattdessen gelöst dies.
Rorymorris89
Nur die Verwendung von "pre" führt dazu, dass der Text den Container überschreitet / nicht umschließt. Verwenden Sie white-space: pre-line;stattdessen.
Frederiko Cesar
6

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)

Philipp Munin
quelle
Vielen Dank, nachdem Sie verschiedene Möglichkeiten ausprobiert haben. Dies ist die einzige Lösung, die für mich funktioniert hat.
Saurabh Rana
2

Probier diese,

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

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.

joedotnot
quelle
0

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

Frederiko Cesar
quelle
0

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
Darshuu
quelle
0

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.

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