JSX语法解析变量中的换行符实现换行

时间：2024-03-24 07:10:30

在react中，经常会碰到从后端获取到的一段字符串中包含‘\n’换行符的情况，此时，我们要在dom中渲染该字符串，并让其在换行符的地方实现换行。如果直接去使用jsx语法渲染的话，可能不能如你所愿。

jsx引入了dangerouslySetInnerHTML

下面是react官网对dangerouslySetInnerHTML的介绍：

dangerouslySetInnerHTML

dangerouslySetInnerHTMLReact是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>

CSS white-space 属性

JSX语法解析变量中的换行符实现换行

相关文章