React가 관리하는 자녀가 있는 contentEditable 구성 요소에 대해 경고하는 이유는 무엇입니까?

React가 관리하는 자녀가 있는 contentEditable 구성 요소에 대해 경고하는 이유는 무엇입니까?

컴포넌트를 렌더링할 때 다음 경고가 표시됩니다.

경고:컴포넌트는contentEditable및 포함children리액트에 의해 관리됩니다.이제 이러한 노드가 예기치 않게 변경되거나 중복되지 않도록 보장하는 것은 사용자의 책임입니다.이것은 아마 고의는 아닐 것이다.

이것은 나의 컴포넌트입니다.

import React, { Component } from "react";

export default class Editable extends Component {
  render() {
    return (
      <div contentEditable={true} onBlur={this.props.handleBlur}>
        {this.props.children}
      </div>
    );
  }
}

리액트가 경고하려고 하는 내 코드의 잠재적인 문제는 무엇입니까?저는 https://reactjs.org/docs/dom-elements.html에서 문서를 읽고 잘 이해하지 못했습니다.

컴포넌트는 관리 입력 필드처럼 문제없이 동작해야 합니다.

1. this.props.children초기값입니다.
2. 그onBlur콜백이 소품을 갱신하다event.target.innerHTML
3. 구성요소는 새로운 소품으로 렌더링된다

의 설정contenteditablehtml 속성을 사용하면 해당 요소의 내용을 브라우저에서 변경할 수 있습니다.React는 해당 요소 내에 React에 의해 관리되는 자녀가 있음을 경고합니다.리액션은 위에서 아래로만 작동합니다.즉, 최상위 수준에서 모델을 관리하고 해당 데이터를 나타내는 가상 DOM을 유지한 다음 해당 가상 DOM을 기반으로 DOM 트리를 렌더링합니다.리액트 이외의 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>

언급URL : https://stackoverflow.com/questions/49639144/why-does-react-warn-against-an-contenteditable-component-having-children-managed