gpt4 book ai didi

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

转载 作者:可可西里 更新时间:2023-11-01 02:31:21 27 4
gpt4 key购买 nike

我在渲染我的组件时收到以下警告:

Warning: A component is contentEditable and contains children managed by React. It is now your responsibility to guarantee that none of those nodes are unexpectedly modified or duplicated. This is probably not intentional.

这是我的组件:

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 的 Prop
  3. 组件使用新的 props 渲染

最佳答案

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

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

如果您知道自己在做什么(现在看起来您知道),那么您可以通过添加 suppressContentEditableWarning={true} 来抑制该警告。

关于javascript - 为什么 React 会针对具有由 React 管理的子项的 contentEditable 组件发出警告?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49639144/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com