Javascript 为什么React会针对具有React管理的子级的contentEditable组件发出警告？

渲染组件时，我收到以下警告：

import React, { Component } from "react";

export default class Editable extends Component {
  render() {
    return (
      <div contentEditable={true} onBlur={this.props.handleBlur}>
        {this.props.children}
      </div>
    );
  }
}

警告：组件是可编辑的，并且包含子组件 由React管理。现在你的责任是保证没有 其中一个节点被意外修改或复制。这是 可能不是故意的

这是我的组件：

import React, { Component } from "react";

export default class Editable extends Component {
  render() {
    return (
      <div contentEditable={true} onBlur={this.props.handleBlur}>
        {this.props.children}
      </div>
    );
  }
}

import React，{Component}来自“React”；
导出默认类可编辑扩展组件{
render（）{
返回(
{this.props.children}
);
}
}

React想要警告我的代码有什么潜在问题？我没有完全理解从阅读文档在

我认为我的组件应该像托管输入字段一样工作，没有任何问题：

此.props.children

为初始值

onBlur

回调从

event.target.innerHTML

使用新的道具渲染组件

---

设置

contenteditable

html属性允许在浏览器中修改该元素的内容。React警告您在该元素中有由React管理的子元素。React只从上到下起作用。这意味着它在顶层管理一个模型，并维护一个表示该数据的虚拟DOM，然后基于该虚拟DOM呈现DOM树。在React之外对DOM所做的任何更改（例如设置

contenteditable

并允许用户直接在浏览器中编辑内容）都可能会被吹走，或者在React更新这些托管元素时会导致问题

在您的情况下，您不在乎

{this.props.children}

节点被吹走，因为您知道您正在捕获更改并使用它做您需要做的事情。它只是警告您，当您让浏览器直接编辑内容时，最好不要期望React保持节点的完整性并准确地更新节点

---

如果您知道自己在做什么（目前看起来是这样），那么您可以通过添加

suppressContentEditableWarning={true}

来抑制该警告，谢谢@Chev！它修复了警告

      <p
        className={editing ? 'editing' : ''}
        onClick={editOnClick ? this.toggleEdit : undefined}
        contentEditable={editing}
        ref={(domNode) => {
          this.domElm = domNode;
        }}
        onBlur={this.save}
        onKeyDown={this.handleKeyDown}
        {...this.props}
        suppressContentEditableWarning={true}
      >
        {this.props.value}
      </p>

{
this.domElm=domNode；
}}
onBlur={this.save}
onKeyDown={this.handleKeyDown}
{……这个。道具}
suppressContentEditableWarning={true}
>
{this.props.value}

React警告您不要使用潜在的步兵。如果你知道如何正确使用工具，使它不会射中你的脚，那么就用它跑吧。如果你射中了自己的脚，不要惊讶，因为你被警告过。React不知道这个.props.children中包含了什么，它只知道你可以摧毁那些道具。各种事情都有后果。如果有事件订阅，它们可能会成为内存泄漏，如果有绑定属性，它们可能会成为悬挂物，等等。正如Zzbov所说，不要开枪打自己的脚。听起来你不会，但我们也不会反应。嗨@Chev，谢谢，这很有效！！但我也很想知道缺点，抑制错误。然而，仅仅避免错误并不能保证页面上的所有内容都正常工作。缺点是您可能会忘记并陷入疑惑，不知道为什么用户内容会被破坏。不，抑制错误并不能保证一切正常。理解错误就可以了。在您的情况下，您没有做任何会遇到问题的事情，因为您只使用

this.props.children

来设置组件的初始值。@Chev可以给出一个简单的例子，说明什么时候会遇到问题？最近，jsut使用了bare suppressContentEditableWarning关键字。