React中使用Ref无法获取ContentEditable组件innerHTML的原因及优化方案

你遇到的innerHTML返回undefined的核心原因是：你通过ref获取到的不是原生DOM节点，而是第三方ContentEditable组件的实例（或其内部封装的对象）。这类自定义组件默认不会把内部的DOM节点直接暴露给外部的ref，因此它没有原生DOM元素的innerHTML属性。

针对这个问题，有两种常见的解决思路：

1. 使用组件自身提供的API获取内容 #

多数第三方ContentEditable组件会在onChange事件中直接返回当前的HTML内容，不需要通过ref手动获取。比如检查事件参数，通常会包含当前编辑的内容：

const onContentChange = React.useCallback((evt, html) => {
  // 直接使用组件返回的html值
  console.log(html);
  // setContent(sanitizeHtml(html, sanitizeConf))    
}, [])

2. 确保组件转发ref到原生DOM #

如果组件支持forwardRef，你需要确认ContentEditable内部已经将ref转发给了实际的<div>元素。如果是你自己封装的ContentEditable，需要用React.forwardRef实现：

// 示例：封装支持forwardRef的ContentEditable
const ContentEditable = React.forwardRef((props, ref) => {
  return (
    <div
      ref={ref}
      contentEditable
      dangerouslySetInnerHTML={{ __html: props.html }}
      onChange={(e) => props.onChange(e, e.currentTarget.innerHTML)}
      // 其他props...
    />
  );
});

这样你的valueRef.current就能拿到原生DOM节点，进而访问innerHTML。

针对你的代码，有以下几个优化点：

1. 提取常量到组件外部
   把不会变化的配置（如sanitizeConf、样式对象）放到组件外面，避免每次渲染重复创建：

const sanitizeConf = {
  allowedTags: ["b", "i", "a", "p"],
  allowedAttributes: {
    a: ["href"]
  }
};

const editableStyle = {
  overflowWrap: 'break-word',
  wordWrap: 'break-word',
  wordBreak: 'break-word',
  whiteSpace: 'pre-wrap',
  overflow: 'auto'
};

2. 简化useCallback依赖
   由于sanitizeConf是外部常量，useCallback的依赖数组只需包含实际变化的变量（比如setContent）：

const onContentChange = React.useCallback((evt, html) => {
  const sanitizedContent = sanitizeHtml(html, sanitizeConf);
  setContent(sanitizedContent);
}, [setContent])

3. 优先使用组件事件传递的内容
   尽量避免依赖ref获取内容，而是用组件onChange事件提供的参数，这样更符合React的数据流模式，也能避免ref同步问题。

4. 移除无用的ref（可选）
   如果改用事件参数获取内容，原本的valueRef可以直接删除，减少不必要的代码。

优化后的完整代码示例：

import React, { useCallback } from 'react';
import sanitizeHtml from 'sanitize-html';

const sanitizeConf = {
  allowedTags: ["b", "i", "a", "p"],
  allowedAttributes: {
    a: ["href"]
  }
};

const editableStyle = {
  overflowWrap: 'break-word',
  wordWrap: 'break-word',
  wordBreak: 'break-word',
  whiteSpace: 'pre-wrap',
  overflow: 'auto'
};

const MyEditableComponent = ({ content, setContent }) => {
  const onContentChange = useCallback((evt, html) => {
    const sanitizedContent = sanitizeHtml(html, sanitizeConf);
    setContent(sanitizedContent);
  }, [setContent])

  return (
    <ContentEditable 
      html={content}
      onChange={onContentChange}
      tagName="div"             
      style={editableStyle}
    />
  )
}

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