时间戳

首页 > 解决方案 > 在 React 中显示来自 WYSIWYG 的 HTML 代码给了我一个警告

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

问题描述

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

import ReactHtmlParser from "react-html-parser";

...

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

React 不喜欢它并说：

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

我怎样才能解决这个问题？

标签： reactjshtml-parsing

解决方案

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

因此，您有三个选择。

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

对于第三个选项，使用suppressContentEditableWarning

推荐阅读