如何将 htmldivelement 对象转换为 JSX/React 元素？答案

【问题标题】：How to convert a htmldivelement Object into a JSX/React Element?如何将 htmldivelement 对象转换为 JSX/React 元素？
【发布时间】：2021-09-28 11:56:10
【问题描述】：

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

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

P.S. 我知道 react 有 dangerouslySetInnerHTML 属性，并且存在一个名为 react-html-parser 的 NPM 包。但是，我正在寻找一种更安全的选项，它不会让我的 Web 应用程序受到 XXS 攻击。

【问题讨论】：

我很抱歉附上了错误的截图。我收到的错误是“对象作为 React 子项无效（找到：[object HTMLDivElement]）。如果您要呈现子项集合，请改用数组”

标签： javascript html reactjs dom jsx

【解决方案1】：

有一个名为 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

【讨论】：

非常感谢！我确实有一个问题。有什么办法可以阻止恶意行为者通过浏览器操纵我的应用程序中的 .js 文件以消除环境污染？
@SoftWorker 不客气 :) 我不太了解安全性，但我认为 xss 攻击会使用您的文本输入字段将 javascript 代码注入您的网站，所以我认为唯一的方法是防止这些攻击是避免或小心使用危险的SetInnerHTML，并在需要时进行足够的表单验证和清理。您还应该了解如何防止其他类型的攻击；）