Facebook nutzen React
. Auf einer Einstellungsseite habe ich eine mehrzeilige Seite, textarea
in die ein Benutzer mehrzeiligen Text eingeben kann (in meinem Fall eine Adresse).
<textarea value={address} />
Wenn ich versuche, die Adresse anzuzeigen, werden {address}
die Zeilenumbrüche nicht angezeigt und befinden sich alle in einer Zeile.
<p>{address}</p>
Irgendwelche Ideen, wie man das löst?
javascript
reactjs
textarea
denislexisch
quelle
quelle
Dies ist zu erwarten, Sie müssten die neuen Zeilenzeichen (\ n) in HTML-Zeilenumbrüche konvertieren
Ein Artikel über die Verwendung in React : Reagiere Newline, um zu brechen (nl2br)
Artikel zitieren:
quelle
....map(function (item, i) { return <span key={i}>{item}<br/></span> })
<br />
für das letzte Element gerendert wird :....map(function (item, i, arr) { return <span key={i}>{item}{ arr.length-1 === i ? null : <br/>}</span> })
. Beachten Sie, dass ich das 3. Argument für.map()
[object Object]
Die Lösung besteht darin, die Eigenschaft
white-space
für das Element festzulegen, das den Inhalt Ihrestextarea
:quelle
Petes früherer Vorschlag mit einer eigenständigen Komponente ist eine großartige Lösung, obwohl eine wichtige Sache übersehen wird. Listen benötigen Schlüssel . Ich habe es ein wenig angepasst und meine Version (ohne Konsolenwarnungen) sieht folgendermaßen aus:
const NewLineToBr = ({ children = '' }) => children.split('\n') .reduce((arr, line, index) => arr.concat( <Fragment key={index}> {line} <br /> </Fragment>, ), [])
Es werden die Fragmente von React 16 verwendet
quelle
Ab Reaktion 16 kann eine Komponente ein Array von Elementen zurückgeben. Dies bedeutet, dass Sie eine Komponente wie folgt erstellen können:
export default function NewLineToBr({children = ""}){ return children.split('\n').reduce(function (arr,line) { return arr.concat( line, <br /> ); },[]); }
was du so verwenden würdest:
<p> <NewLineToBr>{address}</NewLineToBr> </p>
quelle
Liebe Webit-Version. Ich wusste nichts über die Fragment-Komponente, sie ist so nützlich. Die Reduktionsmethode muss jedoch nicht verwendet werden. Karte ist genug. Außerdem benötigt die Liste Schlüssel zum Reagieren, aber es ist eine schlechte Angewohnheit, den Index der iterierenden Methode dafür zu verwenden. Eslint hat dies in meiner Warnung immer wieder zerschlagen, bis ich den Verwirrungsfehler hatte. So würde es aussehen:
const NewLine = ({ children }) => children.split("\n").map(line => ( <Fragment key={uuidv4()}> {line} <br /> </Fragment> ));
quelle