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

·No AI「完全由人类大脑和双手完成，没有任何AI参与」

#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代码字符串，并防止潜在的安全问题。

相关文章