如何在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具有此style属性）

在普通的html文本区域内呈现定界文本“我的第一行\我的第二行\ nWhatevs ...”。我知道它有效，因为我今天才使用它！如果需要，将文本区域设置为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>