Contenteditable

Contenteditable

<blockquote contenteditable="true" suppressContentEditableWarning={true}>
    <p>Edit this content to add your own quote</p>
</blockquote>

<cite contenteditable="true">-- Write your own name here</cite>

const insertTextAtCaret = (text) => {
    var sel, range;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();
            range.insertNode( document.createTextNode(text) );
        }
    } else if (document.selection && document.selection.createRange) {
        document.selection.createRange().text = text;
    }
}

contenteditablehtml 속성을 설정하면 해당 요소의 내용을 브라우저에서 수정할 수 있습니다. React는 해당 요소 내에 React에서 관리하는 자식이 있음을 경고합니다. React는 위에서 아래로만 작동합니다. 즉, 최상위 수준에서 모델을 관리하고 해당 데이터를 나타내는 가상 DOM을 유지 관리한 다음 해당 가상 DOM을 기반으로 DOM 트리를 렌더링합니다. React 외부에서 DOM에 대한 모든 변경(예: contenteditable브라우저에서 사용자가 직접 콘텐츠를 설정 하고 편집할 수 있도록 허용)은 잠재적으로 날아가거나 React가 관리되는 요소를 업데이트할 때 문제를 일으킬 수 있습니다.

귀하의 상황에서는 {this.props.children}변경 사항을 포착하고 필요한 작업을 수행하고 있다는 것을 알고 있기 때문에 노드가 날아가는 것을 신경 쓰지 않습니다 . 브라우저에서 직접 콘텐츠를 편집할 때 해당 노드가 손상되지 않고 React에 의해 정확하게 업데이트될 것으로 기대하지 않는 것이 좋습니다.

당신이 무엇을 하고 있는지 알고 있다면(지금은 그렇게 하는 것처럼 보입니다) 를 추가하여 해당 경고를 억제할 수 있습니다 suppressContentEditableWarning={true}.