react中使用TS将一个string类型的字符串('域名资产:第2行,负责人default不存在\n主机资产:第2行,负责人default不存在\n主机资产:第2行)根据字符串中的换行符进行换行展示
时间: 2024-02-20 10:02:15 浏览: 199
react-string-replace:一种使用React组件安全地进行字符串替换的简单方法
您可以使用React中的`<pre>`标签来展示多行文本,并使用字符串的`split()`方法在换行符上拆分字符串。以下是一个例子:
```tsx
import React from 'react';
interface Props {
text: string;
}
const MultiLineText: React.FC<Props> = ({ text }) => {
return (
<pre>
{text.split('\n').map((line, index) => (
<React.Fragment key={index}>
{line}
<br />
</React.Fragment>
))}
</pre>
);
};
export default MultiLineText;
```
在上面的代码中,我们创建了一个名为`MultiLineText`的组件,它接受一个名为`text`的字符串类型属性。在组件中,我们使用`split()`方法将字符串拆分为行,并使用`map()`方法在每行后添加`<br>`标签。最后,我们将结果包装在`<pre>`标签中,以便在显示时保留换行符。
阅读全文