Reagieren Sie auf Zeilenumbrüche im gespeicherten Textbereich

Facebook nutzen React. Auf einer Einstellungsseite habe ich eine mehrzeilige Seite, textareain 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?

Es gibt keinen Grund, JS zu verwenden. Mit der white-spaceCSS-Eigenschaft können Sie dem Browser leicht mitteilen, wie mit Zeilenumbrüchen umgegangen werden soll :

white-space: pre-line;

Vorzeile

Leerzeichenfolgen werden reduziert. Zeilen werden bei Zeilenumbrüchen, bei <br>und nach Bedarf unterbrochen, um Zeilenfelder zu füllen.

Schauen Sie sich diese Demo an:

<style>
  #p_wrap {
    white-space: pre-line;
  }
</style>

<textarea id="textarea"></textarea>
<p id="p_standard"></p>
<hr>
<p id="p_wrap"></p>
<script>
  textarea.addEventListener('keypress', function(e) {
    p_standard.textContent = e.target.value
    p_wrap.textContent = e.target.value
  })
</script>

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:

Da Sie wissen, dass alles in React Funktionen sind, können Sie dies nicht wirklich tun

this.state.text.replace(/(?:\r\n|\r|\n)/g, '<br />')

Da dies eine Zeichenfolge mit DOM-Knoten zurückgeben würde, ist dies ebenfalls nicht zulässig, da es sich nur um eine Zeichenfolge handeln muss.

Sie können dann versuchen, so etwas zu tun:

{this.props.section.text.split(“\n”).map(function(item) {
  return (
    {item}
    <br/>
  )
})}    

Das ist auch nicht erlaubt, da React wieder reine Funktionen sind und zwei Funktionen nebeneinander liegen können.

tldr. Lösung

{this.props.section.text.split(“\n”).map(function(item) {
  return (
    <span>
      {item}
      <br/>
    </span>
  )
})}

Jetzt wickeln wir jeden Zeilenumbruch in einen Bereich ein, und das funktioniert einwandfrei, da der Bereich inline angezeigt wird. Jetzt haben wir eine funktionierende nl2br-Zeilenumbruchlösung

Die Lösung besteht darin, die Eigenschaft white-spacefür das Element festzulegen, das den Inhalt Ihres textarea:

white-space: pre-line;

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

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>

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