javascript 为什么 React 会针对具有由 React 管理的子项的 contentEditable 组件发出警告？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49639144/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why does React warn against an contentEditable component having children managed by React?
提问by user1283776
I get the following warning when rendering my component:
渲染我的组件时，我收到以下警告：
Warning: A component is
contentEditableand containschildrenmanaged by React. It is now your responsibility to guarantee that none of those nodes are unexpectedly modified or duplicated. This is probably not intentional.
警告：组件是
contentEditable和包含children由 React 管理的。现在您有责任保证这些节点都不会被意外修改或复制。这可能不是故意的。
This is my component:
这是我的组件：
import React, { Component } from "react";
export default class Editable extends Component {
render() {
return (
<div contentEditable={true} onBlur={this.props.handleBlur}>
{this.props.children}
</div>
);
}
}
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.
React 想要警告我的代码的潜在问题是什么？通过阅读https://reactjs.org/docs/dom-elements.html 上的文档，我不太明白。
I imagine that my component should work exactly like an managed input field, without any problem:
我想我的组件应该像托管输入字段一样工作，没有任何问题：
this.props.childrenis initial value- the
onBlurcallback updates the props fromevent.target.innerHTML - the component is rendered with the new props
this.props.children是初始值- 该
onBlur回调更新从道具event.target.innerHTML - 组件使用新的 props 渲染
回答by Chev
Setting the contenteditablehtml 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 contenteditableand 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.
设置contenteditablehtml 属性允许在浏览器中修改该元素的内容。React 警告你，你在该元素中有由 React 管理的子元素。React 只能自上而下地工作。这意味着它在顶层管理模型并维护表示该数据的虚拟 DOM，然后根据该虚拟 DOM 呈现 DOM 树。您在 React 之外对 DOM 所做的任何更改（例如设置contenteditable和允许用户直接在浏览器中编辑内容）都可能会在 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.
在您的情况下，您并不关心{this.props.children}节点是否被吹走，因为您知道您正在捕捉变化并做您需要做的事情。它只是警告您，当您让浏览器直接编辑内容时，最好不要期望该节点保持完整并由 React 准确更新。
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}.
如果您知道自己在做什么（现在看起来是这样），那么您可以通过添加suppressContentEditableWarning={true}.
