React为何警告contentEditable组件包含React管理的子元素？

这个警告的核心逻辑很好理解：当你把一个元素设为contentEditable={true}时，浏览器会开放该元素的内容编辑权限，但如果这个元素里还存在React管理的子组件/元素，React就无法保证这些子节点不会被用户的编辑操作意外修改、删除或重复——毕竟React的虚拟DOM和浏览器真实DOM此时会出现控制权冲突，这通常不是开发者的本意，所以React抛出了这个警告。

针对你的Editable组件，这里有两种常见的解决方案，你可以根据自身需求选择：

方案一：将子元素转为纯文本作为初始可编辑内容 #

如果你的需求只是让这个div区域可编辑，不需要保留原有子元素的React组件结构，那可以把传入的children提取成纯文本，作为可编辑区域的初始内容，这样React就不会再管理div内部的节点了：

import React, { Component } from "react";

export default class Editable extends Component {
  // 递归提取所有子元素的文本内容
  extractTextFromChildren = (children) => {
    return React.Children.toArray(children)
      .map(child => {
        if (typeof child === "string") return child;
        // 嵌套React元素则继续递归提取文本
        if (child.props?.children) return this.extractTextFromChildren(child.props.children);
        return "";
      })
      .join("");
  };

  render() {
    const initialContent = this.extractTextFromChildren(this.props.children);
    return (
      <div 
        contentEditable={true} 
        onBlur={this.props.handleBlur}
        dangerouslySetInnerHTML={{ __html: initialContent }}
      />
    );
  }
}

如果你的children本来就是纯文本（无嵌套组件），还可以更简化：

<div contentEditable={true} onBlur={this.props.handleBlur}>
  {this.props.children.toString()}
</div>

方案二：手动管理可编辑内容的状态 #

如果需要动态维护可编辑区域的内容，且要避免React和浏览器DOM的冲突，最好的方式是把可编辑内容维护在组件的state里，通过onInput事件同步真实DOM的变化到state，再用dangerouslySetInnerHTML渲染内容：

import React, { Component } from "react";

export default class Editable extends Component {
  state = {
    // 用传入的children文本作为初始内容，也可接受父组件传入的初始值
    content: this.extractTextFromChildren(this.props.children)
  };

  extractTextFromChildren = (children) => {
    return React.Children.toArray(children)
      .map(child => {
        if (typeof child === "string") return child;
        if (child.props?.children) return this.extractTextFromChildren(child.props.children);
        return "";
      })
      .join("");
  };

  handleInput = (e) => {
    // 同步真实DOM的内容到state
    this.setState({ content: e.currentTarget.innerHTML });
  };

  handleBlur = (e) => {
    // 把最终编辑后的内容传给父组件
    this.props.handleBlur(this.state.content);
  };

  render() {
    return (
      <div 
        contentEditable={true} 
        onInput={this.handleInput}
        onBlur={this.handleBlur}
        dangerouslySetInnerHTML={{ __html: this.state.content }}
      />
    );
  }
}

注意事项 #

如果你确实需要在contentEditable元素里保留React组件（比如插入自定义可编辑组件），那必须手动处理虚拟DOM和真实DOM的同步逻辑，这种情况很容易出现难以调试的bug，除非有特殊需求，否则不建议这么做。

内容的提问来源于stack exchange，提问作者user1283776