При визуализации моего компонента появляется следующее предупреждение:
Предупреждение: компонентом является
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
- компонент отображается с новым реквизитом