it-swarm.com.de

Zeilenumbrüche von gespeicherten Textbereichen aus reagieren

Verwendung von Facebook React. .__ Auf einer Einstellungsseite habe ich eine mehrzeilige textarea, in der ein Benutzer mehrzeiligen Text eingeben kann (in meinem Fall eine Adresse). 

<textarea value={address} />

Wenn ich versuche, die Adresse anzuzeigen, also etwa {address}, werden die Zeilenumbrüche nicht angezeigt und befinden sich alle in einer Zeile. 

<p>{address}</p>

Irgendwelche Ideen, wie man das lösen kann? 

49
denislexic

Es gibt keinen Grund, JS zu verwenden. Sie können dem Browser problemlos mit der CSS-Eigenschaft white-space mitteilen, wie mit Newline verfahren werden soll:

white-space: pre-line;

pre-Line 

Whitespace-Sequenzen werden reduziert. Zeilen sind um .__ gebrochen. Zeilenumbrüche bei <br> und bei Bedarf zum Ausfüllen von Zeilenfeldern.

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>

 browser support for pre-line

147
enapupe

Dies ist zu erwarten, Sie müssen die neuen Zeilenzeichen (\ n) in HTML-Zeilenumbrüche konvertieren 

Ein Artikel über die Verwendung in reagieren: https://medium.com/@kevinsimper/react-newline-to-break-nl2br-a1c240ba746#.l9sbqp5aw

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 innerhalb zurückgeben würde, ist dies ebenfalls nicht zulässig, da es sich nur um eine Zeichenfolge handeln muss.

Sie können dann so etwas versuchen:

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

Das ist auch nicht erlaubt, weil React wieder reine Funktionen ist und zwei Funktionen nebeneinander stehen 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 einem Bereich um, und das funktioniert gut, weil der Bereich des Bereichs Inline anzeigt. Jetzt haben wir eine funktionierende nl2br-Lösung für Zeilenumbrüche

28
Mark Milford

Die Lösung besteht darin, die Eigenschaft white-space für das Element festzulegen, das den Inhalt Ihrer textarea anzeigt:

white-space: pre-line;
4
OualidAj

Ab React 16 kann eine Komponente ein Array von Elementen zurückgeben, dh Sie können eine Komponente wie folgt erstellen:

export default function NewLineToBr({children = ""}){
  return children.split('\n').reduce(function (arr,line) {
    return arr.concat(
      line,
      <br />
    );
  },[]);
}

was würdest du so verwenden:

<p>
  <NewLineToBr>{address}</NewLineToBr>
</p>
1
Pete Hodgson

Der vorherige Vorschlag von Pete mit einer eigenständigen Komponente ist eine großartige Lösung, obwohl eine wichtige Sache fehlt. Listet Bedürfnisse Tasten auf. 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 verwendet React 16 Fragmente

1
webit

Liebe webit version. Ich wusste nicht über die Fragment-Komponente Bescheid, sie ist so nützlich. Die Reduktionsmethode muss jedoch nicht verwendet werden. Karte ist genug. List benötigt auch Schlüssel in reag, aber es ist eine schlechte Angewohnheit, den Index aus der iterierenden Methode dafür zu verwenden. eslint zertrümmerte dies immer wieder in meiner Warnung, bis ich den Verwirrungsfehler hatte. So würde es so aussehen: 

const NewLine = ({ children }) =>
   children.split("\n").map(line => (
    <Fragment key={uuidv4()}>
      {line}
      <br />
    </Fragment>
  ));
0
Handle