如何渲染ContentEditable组件且避免ContentEditableWarning警告？

这个警告我太熟了！本质是React和浏览器的contentEditable系统在DOM控制权上撞车了——你给div设置了contentEditable={true}，同时又让React管理它的children，两边都想插手DOM节点的修改，React就会跳出来提醒你：现在得你自己保证这些节点不会被意外修改或重复，这大概率不是你故意要搞的复杂逻辑。

给你两种最常用的解决方案，看你的需求选：

方案一：移除React管理的children，用dangerouslySetInnerHTML初始化内容 #

如果你的组件只是需要一个可编辑区域，不需要React持续管理子内容，那直接把{this.props.children}去掉，改用dangerouslySetInnerHTML来设置初始内容就行。这样React就不会再试图控制这个div的子节点，警告自然消失：

import React, { Component } from "react";

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

别怕dangerouslySetInnerHTML的名字，只要你传入的content是可控、安全的内容，完全可以放心用。

方案二：分离React管理内容和可编辑区域 #

如果你确实需要React管理一部分固定内容，同时保留可编辑区域，那把两者拆分开，让可编辑的div没有React管理的子节点就行：

import React, { Component } from "react";

export default class Editable extends Component {
  render() {
    return (
      <div>
        {/* React管理的固定内容，和可编辑区域分开 */}
        <span>{this.props.fixedContent}</span>
        {/* 独立的可编辑区域，没有React管控的children */}
        <div contentEditable={true} onBlur={this.props.handleBlur} />
      </div>
    );
  }
}

这样React管它的固定内容，浏览器管可编辑区域的DOM，两边互不干扰，警告也就不存在了。

简单总结下：这个警告的核心是不要让React和contentEditable同时控制同一个DOM元素的子节点，把两者的职责分清楚就搞定了。

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