为什么React会警告一个带有由React管理的子级的contentEditable组件? [英] Why does React warn against an contentEditable component having children managed by React?

问题描述

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

I get the following warning when rendering my component:

警告:组件是 contentEditable ，并且包含 children 由React管理.现在，您有责任保证没有这些节点中的一个意外地被修改或重复.这是可能不是故意的.

Warning: A component is contentEditable and contains children managed by React. It is now your responsibility to guarantee that none of those nodes are unexpectedly modified or duplicated. This is probably not intentional.

这是我的组件:

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 .

What is the potential problem with my code that React wants to warn me about? I did not quite understand from reading the documentation at https://reactjs.org/docs/dom-elements.html.

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

I imagine that my component should work exactly like an managed input field, without any problem:

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

推荐答案

设置 contenteditable html属性可以在浏览器中修改该元素的内容.React警告您在该元素中有由React管理的子级.React只能自上而下运行.这意味着它在顶层管理模型并维护表示该数据的虚拟DOM，然后基于该虚拟DOM渲染DOM树.您在React之外对DOM所做的任何更改(例如设置 contenteditable 并允​​许用户直接在浏览器中编辑内容)都可能被吹走或对React造成问题更新这些托管元素.

Setting the contenteditable html attribute allows the contents of that element to be modified in the browser. React is warning you that you have children within that element that are managed by React. React only works from the top down. Meaning it manages a model at the top level and maintains a virtual DOM representing that data, then renders the DOM tree based on that virtual DOM. Any changes you make to the DOM outside of React (such as setting contenteditable and allowing the content to be edited by a user directly in the browser) will be potentially blown away or cause problems for React when it goes to update those managed elements.

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

In your situation you don't care that the {this.props.children} node gets blown away because you know you're catching the changes and doing what you need to with it. It's just warning you that you better not expect that node to remain intact and accurately updated by React when you're letting the content be edited by the browser directly.

如果您知道自己在做什么(现在看起来很像)，则可以通过添加 suppressContentEditableWarning = {true} 来抑制该警告.

If you know what you're doing (and for now it looks like you do) then you can suppress that warning by adding suppressContentEditableWarning={true}.

这篇关于为什么React会警告一个带有由React管理的子级的contentEditable组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！