Reactで複数行のテキスト文字列をレンダリングする方法

改行を含むテキスト文字列があり、次のようにレンダリングするとします。

render() {
    var text = "One\nTwo\nThree";
    return <div>{text}</div>;
}

HTMLでは、改行は改行として表示されません。Reactでこれをどのように行う必要がありますか？<br>タグに変換して使用したくありませんdangerouslySetInnerHTML。別の方法はありますか？

各行にdivを配置してみてください

render() {
    return (<div>
        <div>{"One"}</div>
        <div>{"Two"}</div>
        <div>{"Three"}</div>
    </div>);
}

または

render() {
    var text = "One\nTwo\nThree";
    return (
    <div>
        {text.split("\n").map((i,key) => {
            return <div key={key}>{i}</div>;
        })}
    </div>);
}

新しいCSSクラスを作成する

.display-linebreak {
  white-space: pre-line;
}

そのCSSクラスでテキストを表示する

render() {
  const text = 'One \n Two \n Three';
  return ( 
     <div className="display-linebreak"> 
        {text} 
     </div>
  );
}

改行付きでレンダリングします（空白のシーケンスは単一の空白に折りたたまれます。テキストは必要に応じて折り返されます）。このような：

One
Two
Three

プレラップを検討することもできます。詳細はこちら（CSS空白プロパティ）。

CSSプロパティ「white-space：pre」を使用できます。これがこれを処理する最も簡単な方法だと思います。

ここで最もクリーンなソリューション（afaik）：

   render(){
      return <pre>
             Line 1{"\n"}
             Line 2{"\n"}
             Line 3{"\n"}
      </pre>
   }

代わりに使うこともでき<div style={{whiteSpace:"pre"}}>、または（のような任意の他のHTMLブロック要素spanまたはpこのスタイル属性を持ちます）

区切られたテキスト「Mylineone \ nMy second line \ nWhatevs ...」を通常のhtmlテキストエリア内にレンダリングします。今日使ったばかりなのでうまくいくと思います！必要に応じてtextareaをreadOnlyにし、それに応じてスタイルを設定します。

あなたは-webkit-user-modify: read-write-plaintext-only;あなたのdivで使うことができます。たとえば、\ nや\ pなどをフォーマットして理解します。

htmlのtextareaタグを利用でき、後でtextareaタグにスタイルを追加できます。改行やタブスペースなど、すべての問題をほぼ解決します。Cheerzz..。

例：レンダリングは次のようになります

render() {
    var text = "One\nTwo\nThree";
    return <textarea>{text}</textarea>;
}

出力：

One
Two
Three

これを試してみてください

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

String.rawこのタイプの値の代わりに安全に実行できます。

const text = String.raw`One
Two
Three
`

render() {
  return <div style={{ whiteSpace: "pre" }}>{text}</div>
}

<pre>同じことを効果的に行うタグを使用することもできますが、アプリで他の目的に既に使用している場合は、意味的に明確ではありません。

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