为什么React警告一个由React管理孩子的contentEditable组件？

Question

渲染我的组件时收到以下警告:

警告:组件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想要警告我的代码的潜在问题是什么？我在阅读文档时并不太了解this.props.children.

我想我的组件应该像托管输入字段一样工作,没有任何问题:

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}.

Answer 2

谢谢@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>