React.js换行和返回

Question

我正在调用一个API，它响应具有一般形式的项(对象):

{
"comment":"Here is a comment that has a new line n, a return r and a tab in it for this item: rtSome Item"
}

这被添加到react应用程序中:

<Item>{item.comment}</Item>

问题是没有包含新行、制表符和回车。有没有人知道一种语法，在没有怪物搜索和替换的情况下，这将得到尊重(这个API返回数千个这些记录，我宁愿不迭代每一个来插入"<br />"等)。

Answer 1

不幸的是，我不认为ReactJS支持这个开箱即用。我发现了一些你可以在这里使用的东西-在react string

中换行

Answer 2

这就解决了我的问题:

import React from 'react';

//styles
import './index.css';
/**
* Used to preserve whitespace for text values. For instance, n, r, and t characters
* @param {Object} props
* @param {string} props.text The text you want to preserve whitespace from. 
*/
function PreserveWhitespace({text}) {
return (
<span className="preserve-whitespace">
{text}
</span>
);
}
export default PreserveWhitespace;

和CSS:

.preserve-whitespace {
white-space: pre-wrap;
}