为什么 React 会针对具有由 React 管理的子项的 contentEditable 组件发出警告？

IT技术 javascript reactjs
2021-05-15 03:23:44

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

警告：组件是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 上的文档，我不太明白。

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

  1. this.props.children 是初始值
  2. 该onBlur回调更新从propsevent.target.innerHTML
  3. 组件使用新的 props 渲染
2个回答

设置contenteditablehtml 属性允许在浏览器中修改该元素的内容。React 警告你，你在该元素中有由 React 管理的子元素。React 只能自上而下地工作。这意味着它在顶层管理模型并维护表示该数据的虚拟 DOM，然后根据该虚拟 DOM 呈现 DOM 树。您在 React 之外对 DOM 所做的任何更改（例如设置contenteditable和允许用户直接在浏览器中编辑内容）都可能会在 React 更新这些托管元素时被吹走或导致问题。

在您的情况下，您并不关心{this.props.children}节点是否被吹走，因为您知道您正在捕捉变化并做您需要做的事情。它只是警告您，当您让浏览器直接编辑内容时，最好不要期望该节点保持完整并由 React 准确更新。

如果您知道自己在做什么（现在看起来是这样），那么您可以通过添加suppressContentEditableWarning={true}.

谢谢@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>
其它你可能感兴趣的问题
上一篇获取 Animated.Value 的当前值，React-native 下一篇是什么导致第一层出现“液滴”？