在 React 中显示来自 WYSIWYG 的 HTML 代码给了我一个警告

【问题标题】：Displaying HTML code from WYSIWYG in React gives me a warning在 React 中显示来自 WYSIWYG 的 HTML 代码给了我一个警告
【发布时间】：2021-01-04 15:16:45
【问题描述】：

在这个 React 应用程序中，我有一个所见即所得的组件来保存 HTML 代码。代码保存在数据库中。我这样显示代码：

import ReactHtmlParser from "react-html-parser";

...

<div className="card-body pt-4">
  {ReactHtmlParser(props.project.description)}
</div>

React 不喜欢它并说：

警告：组件是 contentEditable 并包含 children 由 React 管理。现在您有责任保证没有这些节点中的一些被意外修改或复制。这是可能不是故意的。

我该如何解决这个问题？

【问题讨论】：

标签： reactjs html-parsing

【解决方案1】：

您最有可能在props.project.description 中使用contentEditable。这引发了这样的警告。它的出现是因为 contentEditable 属性可以更改此元素内的内容，而这些更改不受 React 控制。

因此，您有三个选择。

不要使用 contentEditable 属性
忽略此警告
明确告诉 React，你知道这种 contentEditable 行为并且不需要这些通知。

对于第三个选项，使用suppressContentEditableWarning

【讨论】：

代码实际上没有 contenteditable="true"，我检查了。我还添加了抑制选项
{ReactHtmlParser(props.project.description)}
。警告没有消失
@usertest，那么你的问题可能不在这部分代码。尝试通过浏览器中的开发者工具在生成的 DOM 中找到 contenteditable 属性。