Почему React предупреждает о компоненте contentEditable, у которого есть дети, управляемые React?

При визуализации моего компонента появляется следующее предупреждение:

Предупреждение: компонентом является 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 обновляет реквизит из event.target.innerHTML
  3. компонент отображается с новым реквизитом

Ответы

Ответ 1

Настройка атрибута contenteditable html позволяет изменять содержимое этого элемента в браузере. React предупреждает вас, что у вас есть дети внутри этого элемента, которым управляет React. Реакция работает только сверху вниз. Это означает, что он управляет моделью на верхнем уровне и поддерживает виртуальную DOM, представляющую эти данные, а затем отображает дерево DOM на основе этого виртуального DOM. Любые изменения, внесенные в DOM вне React (например, установка contenteditable и позволяет содержание быть отредактированы пользователем непосредственно в браузере) будет потенциально сбрасывается или вызвать проблемы для React, когда он идет, чтобы обновить эти управляемые элементы.

В вашей ситуации вам все равно, что узел {this.props.children} сбрасывается, потому что вы знаете, что вы ловите изменения и делаете то, что вам нужно. Это просто предупреждает вас, что вам лучше не ожидать, что этот узел останется неповрежденным и точно обновленным React, когда вы позволяете редактировать контент непосредственно браузером.

Если вы знаете, что делаете (и на данный момент это похоже на вас), вы можете подавить это предупреждение, добавив suppressContentEditableWarning={true}.