假设我有一个包含换行符的文本字符串，我将其渲染为：
render() {
var text = "One\nTwo\nThree";
return <div>{text}</div>;
}
在HTML中，换行符不呈现为换行符。我应该如何在React中做到这一点？我不想转换为<br>标签并使用dangerouslySetInnerHTML。还有另一种方法吗？
如何在React中呈现多行文本字符串
第1796篇《如何在React中呈现多行文本字符串》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点
共5个回答
在普通的html文本区域内呈现定界文本“我的第一行\我的第二行\ nWhatevs ...”。我知道它有效，因为我今天才使用它！如有必要，将文本区域设置为readOnly，并相应地设置样式。
这里是最干净的解决方案（afaik）：
render(){
return <pre>
Line 1{"\n"}
Line 2{"\n"}
Line 3{"\n"}
</pre>
}
而不是您也可以使用<div style={{whiteSpace:"pre"}}>或任何其他html块元素（例如span或p具有此style属性）
您可以使用CSS属性“ white-space：pre”。我认为这是处理此问题的最简单方法。
您可以尝试将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>);
}
相似问题
问题类别
您可以
-webkit-user-modify: read-write-plaintext-only;在div中使用。例如，它将格式化并理解\ n和\ p之类的内容。