react中如把HTML代码转成字符串进行渲染?

作者:J.sky · 发表于:
2023-07-14T10:13:40.000000Z
· 更新于:
2023-08-13T22:54:57.637617Z
· Tag: react

今天需要再react组件内渲染一段HTML代码,但是直接复制到组件内渲染会被当做HTML渲染出HTML的dom结构,我的本意是要把这段HTML代码输出为字符串,记录一下解决过程。

问题重现

在return中需要输出一段HTML代码的字符串:

在body中添加canvasHTML标签:<canvas id="matrix"></canvas>

但是这段代码会把HTML代码直接渲染出dom结构了。

解决方法

如果你想在React中将HTML代码作为字符串处理,可以使用DOMPurify库来进行安全的HTML代码转义。DOMPurify库可以过滤和清理HTML代码,防止潜在的跨站脚本攻击(XSS)。

首先,你需要安装dompurify库。可以使用npm或者yarn执行以下命令:

npm install dompurify

或者

pnpm install dompurify

安装完成后,你可以按照以下步骤在React组件中使用DOMPurify:

import React from 'react';
import DOMPurify from 'dompurify';

function App() {
const htmlString = '<p><canvas id="matrix"></canvas>';
const sanitizedHtml = DOMPurify.sanitize(htmlString);

return (
    <div>{sanitizedHtml}</div>
);
}

在上面的例子中,我们导入了DOMPurify库并将HTML代码字符串传递给sanitize函数。sanitize函数会清理和过滤HTML代码,确保其中不包含恶意代码。然后,我们将经过处理的HTML代码字符串作为文本内容渲染在React组件中,而不会被解析为HTML。

使用DOMPurify库可以帮助确保安全地处理HTML代码字符串,并防止潜在的安全问题。