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

假设我有一个包含换行符的文本字符串，我这样呈现它:

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

在 HTML 中，换行符不作为换行符呈现。在《反应》中我应该怎么做？我不想转换为 <br>标签和使用 dangerouslySetInnerHTML。还有别的办法吗？

143446 次浏览
小开
最佳答案

您可以尝试为每行添加 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 属性“ white-space: pre”。我认为这是处理这个问题最简单的方法。

小开

创建一个新的 CSS 类

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

用 CSS 类显示文本

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

Renders with line-breaks (Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary). Like this:

One
Two
Three

你也可以考虑预包装。更多信息在这里(空白属性)。

小开

这里最干净的解决方案(afaik) :

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

也可以使用 <div style=\{\{whiteSpace:"pre"}}>或任何其他 html 块元素(比如带有这个 style 属性的 span或 p)

小开

在普通的 html 文本区域中呈现带分隔符的文本“ My line one nMy second line nWhatevs...”。我知道它管用，因为我今天刚用过！如果必须，将文本区设置为 readOnly，并相应地设置样式。

小开

你可以在你的 div 中使用 -webkit-user-modify: read-write-plaintext-only;，它可以格式化和理解像 n 和 p 这样的东西。

小开

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

您的渲染将看起来像下面的东西

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

产出:

One
Two
Three
小开

Try this one,

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>
小开

我们可以使用包名 记录在案来呈现多行文本:

const multilineText = `
This is line 1
This is line 2
This is line 3
`;


export default function App() {
return (
<>
<div style=\{\{ whiteSpace: "pre-wrap" }}>{dedent(multilineText)}</div>
</>
);
}
小开

Js 组件中的这个例子,

it will insert each line into a new div element by using (map , split) and it is a good example for comments/posts to support ltr/rtl style component at the same time and here is a simple example :

<div>
{ ' this is first line \n this is second line \n this is third line '.split('\n').map( line =>
<div  key={ Math.random() * 10} dir="auto"  style=\{\{ textAlign: 'start'}}> {line}  </div>
)}
</div>

also if your string data comming from API / react state you can use your string variable name as the follwing :

<div>
{ post_comments.split('\n').map( line =>
<div  key={ Math.random() * 10}  dir="auto"  style=\{\{textAlign: 'start'}}> {line} </div>
)}
</div>

这只是一个例子，并根据您的案例/需求进行更改。

如果您愿意，可以根据您的要求将 div 标记替换为 p 标记。

我希望这对你有帮助

小开

We preferred having <br/>s instead and are using this simple function component in our TypeScript project:

import React, { FunctionComponent } from "react"


export const Multiline: FunctionComponent<{ text: string }> = ({ text }) => (
<>
{text.split(/\n|\r\n/).map((segment, index) => (
<>
{index > 0 && <br />}
{segment}
</>
))}
</>
)

提交答案