时间戳

首页 > 解决方案 > 如何将 htmldivelement 对象转换为 JSX/React 元素？

javascript - 如何将 htmldivelement 对象转换为 JSX/React 元素？

问题描述

我一直在尝试将 2 个现有的 Web 应用程序相互集成。然而，一种是使用带有 JSX 的 React，而另一种是使用简单的 JavaScript 和 HTML。因此，我同时使用 DOM 元素和 JSX。

我的问题是，有什么方法可以将 DOM 对象转换为 React 元素？这是因为当我尝试使用 ReactDOM 的.render()方法用 DOM 对象更新 React 页面时， 我收到了这个错误。

PS我知道 react 具有该属性dangerouslySetInnerHTML，并且存在一个名为 react-html-parser 的 NPM 包。但是，我正在寻找一个更安全的选项，它不会将我的 Web 应用程序打开到 XXS 攻击。

标签： javascripthtmlreactjsdomjsx

解决方案

有一个名为 Dompurify 的库。您可以先使用它来清理您的 html，然后使用 react-html-parser 将其转换为 jsx

import DOMPurify from 'dompurify';
import parse from "html-react-parser";

const cleanHtmlString = DOMPurify.sanitize(htmlString,
{ USE_PROFILES: { html: true } });

parse(cleanHtmlString);//will convert it to jsx

推荐阅读