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?
<br>
, könnte dies das Problem sein. Ich habe festgestellt, dass JS Transformer es nur mag, wenn Sie die<br/>
HTML 4-Version verwenden.Antworten:
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>); }
quelle
<MultilineText>
Komponente daraus machen !<div>
Textzeilen formatieren?<p>
scheint semantisch korrekter.Erstelle eine neue CSS-Klasse
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:
Sie können auch Pre-Wrap in Betracht ziehen. Weitere Informationen hier ( CSS White-Space-Eigenschaft ).
quelle
Sie können die CSS-Eigenschaft "white-space: pre" verwenden. Ich denke, dies ist der einfachste Weg, damit umzugehen.
quelle
white-space:pre
hatte den gleichen Effekt wiewhite-space:nowrap
bei mir, dh der Text lief über seinen Container. Verwenden Siewhite-space:pre-wrap
stattdessen gelöst dies.white-space: pre-line;
stattdessen.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 (wiespan
oderp
mit diesem Stilattribut)quelle
Probier diese,
render() { var text = "One\nTwo\nThree"; return <div style={{whiteSpace: 'pre-line'}}>{text}</div>; }
quelle
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.
quelle
Sie können
-webkit-user-modify: read-write-plaintext-only;
in Ihrem div verwenden. Es formatiert und versteht beispielsweise Dinge wie \ n und \ p.quelle
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:
quelle
Sie können
String.raw
stattdessen 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.quelle
<div style={{ whiteSpace: "break-spaces" }}> {JSON.stringify(state, null, " ")} </div>
quelle