为什么React警告由React管理子组件的可满足组件？

Question

在呈现组件时，我得到以下警告：

import React, { Component } from "react";

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

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

1. this.props.children是初始值
2. onblur回调更新event.target.innerhtml
中的道具
3. 使用新道具呈现组件

Answer 1

设置ContentEditablehtml属性允许在浏览器中修改该元素的内容。React警告您，该元素中有由React管理的子元素。React只从上到下工作。这意味着它在顶层管理一个模型，并维护一个表示该数据的虚拟DOM，然后基于该虚拟DOM呈现DOM树。您在React之外对DOM所做的任何更改（例如设置ContentEditable，并允许用户直接在浏览器中编辑内容）都可能被破坏，或者在React更新这些托管元素时给React带来问题。

在您的情况下，您不关心{this.props.children}节点被吹走，因为您知道您正在捕捉更改并对其执行所需的操作。它只是警告您，当您让浏览器直接编辑内容时，最好不要期望该节点保持完整并通过React准确更新。

如果您知道自己在做什么（目前看起来是这样），那么您可以通过添加suppressContentEditableWarning={true}来禁止该警告。