Question

假设我有一个包含换行符的文本字符串，我将其渲染为：

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

在HTML中，换行符不会呈现为换行符。我应该如何在React中做到这一点？我不想转换为<br>代码并使用dangerouslySetInnerHTML。还有另一种方式吗？

Answer 1

制作一个新的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

您也可以考虑预包装。更多信息在这里 http://www.w3schools.com/cssref/pr_text_white-space.asp

Answer 2

您可以尝试为每行添加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>);
}

Answer 3

你可以使用CSS属性＆＃34; white-space：pre＆＃34;。我认为这是解决这个问题的最简单方法。

Answer 4

尝试一下，

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

Answer 5

这是最干净的解决方案（afaik）：

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

而不是你也可以使用<div style={{whiteSpace:"pre"}}>或任何其他html块元素（如span或p与此样式属性）

Answer 6

在普通的html文本区域内呈现分隔的文本“我的第一行\我的第二行\ nWhatevs ...”。我知道它有效，因为我今天才使用它！如有必要，将文本区域设置为只读，并相应地设置样式。

Answer 7

您可以在div中使用-webkit-user-modify: read-write-plaintext-only;。它将格式化并理解例如\ n和\ p之类的东西。

Answer 8

您可以使用html的textarea标签，以后可以将样式添加到textarea标签中。它几乎解决了您所有的问题，包括换行符和制表符空格。 Cheerzz ...

例如：您的渲染效果如下图

Connecting to broker..
Connected with result code 0

输出：

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

Answer 9

对于这种类型的值，您可以安全地运行String.raw。

const text = String.raw`One
Two
Three
`

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

您也可以只使用<pre>标记，该标记可以有效地完成相同的操作，但是如果您已经将其用于应用程序中的其他用途，则在语义上不太清楚。

Answer 10

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

如何在React中呈现多行文本字符串

10 个答案: