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

Question

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

警告：组件 由React
组成contentEditable，包含children。现在，您有责任保证所有这些节点均不会意外修改或重复。这可能不是故意的。

这是我的组件：

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想要警告我的代码潜在的问题是什么？通过阅读https://reactjs.org/docs/dom-
elements.html上
的文档，我不太了解。

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

1. this.props.children 是初始值
2. 该onBlur回调更新从道具event.target.innerHTML
3. 用新道具渲染组件

Answer 1

设置contenteditablehtml属性可以在浏览器中修改该元素的内容。React警告您在该元素中有由React管理的子级。React仅从上至下起作用。这意味着它在顶层管理模型并维护表示该数据的虚拟DOM，然后基于该虚拟DOM渲染DOM树。您在React之外对DOM所做的任何更改（例如设置contenteditable和允许用户直接在浏览器中编辑内容）都可能被删除，或者在更新那些托管元素时给React带来麻烦。

在您所处的情况下，您不必担心{this.props.children}节点会被炸毁，因为您知道自己正在捕获更改并对其进行所需的操作。只是警告您，当您让内容直接由浏览器编辑时，最好不要期望该节点保持完整并被React准确地更新。

如果您知道自己在做什么（现在看起来像您一样），则可以通过添加来消除该警告suppressContentEditableWarning={true}。