JSX语法解析变量中的换行符实现换行
在react中,经常会碰到从后端获取到的一段字符串中包含‘\n’换行符的情况,此时,我们要在dom中渲染该字符串,并让其在换行符的地方实现换行。如果直接去使用jsx语法渲染的话,可能不能如你所愿。
jsx引入了dangerouslySetInnerHTML
下面是react官网对dangerouslySetInnerHTML的介绍:
dangerouslySetInnerHTML
dangerouslySetInnerHTML
React是innerHTML
在浏览器DOM中使用的替代品。通常,从代码设置HTML是有风险的,因为很容易无意中将您的用户暴露给跨站点脚本(XSS)攻击。因此,您可以直接从React设置HTML,但是您必须键入dangerouslySetInnerHTML
并使用__html
键传递对象,以提醒自己这很危险。例如:
function createMarkup() {
return {__html: 'First \n Second'};
}
function MyComponent() {
return <div dangerouslySetInnerHTML={createMarkup()} />;
}
上面的代码虽然可以解析出字符串‘First \n Second’中的\n换行符,但如果‘First \n Second’这个字符串是一个变量,我试了一下,并没有解析出换行,而是将\n解析成一个空格,或是将<br />标签解析成[Object],即如:
function createMarkup() {
let str = 'First \n Second'
return {__html: str}; // 这里字符串换成变量表示
}
function MyComponent() {
return <div dangerouslySetInnerHTML={createMarkup()} />;
}
最终,我在react项目中,并没有使用dangerouslySetInnerHTML属性实现解析\n换行符,我发现,如果是字符串变量中包含\n换行符,只需在css样式中加入whiteSpace: 'pre-wrap'即可实现解析\n换行符。例如:
let str = '要解析出换行符\n要解析出换行符'
// ......
<div style={{whiteSpace: 'pre-wrap'}}>{{str}}</div>