Question

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

警告：组件为contentEditable且包含children 由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>
    );
  }
}

React想要警告我的代码有什么潜在问题？我在阅读https://reactjs.org/docs/dom-elements.html的文档时并不太了解。

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

this.props.children是初始值
onBlur回调从event.target.innerHTML
使用新道具

Answer 1

设置contenteditable html属性允许在浏览器中修改该元素的内容。 React警告您在该元素中有React管理的子节点。 React仅从上到下工作。这意味着它管理顶级模型并维护表示该数据的虚拟DOM，然后基于该虚拟DOM呈现DOM树。您在React之外对DOM所做的任何更改（例如设置contenteditable并允许用户直接在浏览器中编辑内容）都可能会在React发布更新时被吹走或导致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>

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

2 个答案: