如何在react / javascript中处理换行符<br>并将其转换为html

Question

如果我有一个 javascript 变量，例如在反应中：

{variable}

如果我打印它，我会得到：

one<br><br>None 

如何更改<br><br>来自数据库的 html 断线并获得结果：

one

None

Answer 1

您可以使用函数来执行此操作dangerouslySetInnerHTML。https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml<div&nbsp;dangerouslySetInnerHTML={{__html:&nbsp;variable}}&nbsp;/>;然后 HTML 代码将照此呈现。

Answer 2

默认情况下，React 会转义 HTML 以防止 XSS（跨站点脚本）。如果你真的想渲染 HTML，你可以使用dangerouslySetInnerHTML属性：<div&nbsp;dangerouslySetInnerHTML={{__html:&nbsp;variable}}&nbsp;/>或者您可以使用任何解析 html 字符串的节点包。

Answer 3

我认为当您从数据库接收字符串时，它是字符串而不是 html 元素，并且反应无法将其显示为 html 元素。您可以使用此react-html-parser将从数据库接收到的此类 html 模板转换为显示为 html 元素。import React from 'react';import ReactHtmlParser, { processNodes, convertNodeToElement, htmlparser2 } from 'react-html-parser';const StringToHtml = () => {// retrieves variable here&nbsp; return (&nbsp; &nbsp; return <div>{ ReactHtmlParser(variable) }</div>;&nbsp; );}export default StringToHtml;