React Draft Wysiwyg报错及HTML表格渲染失败问题求助

核心错误原因分析 #

1. 函数组件误用类组件语法 #

代码中出现了this.state = { editorState: ... }，但你使用的是函数组件（包含useRef、useState），函数组件不支持类组件的this.state语法，必须用useState声明并管理editorState状态。

2. DOM未挂载就访问Ref #

组件首次渲染时，divRef.current还未绑定到真实DOM元素，直接执行convertFromHTML(divRef.current.innerHTML)会导致divRef.current为undefined，进而引发ContentState.createFromBlockArray和EditorState.createWithContent的链式错误。

3. 尝试渲染带交互的React组件到Draft Editor #

你的HTML包含Select、FormControl等React交互组件，而convertFromHTML仅能处理纯静态HTML，无法解析React组件的动态逻辑与属性，这会导致渲染异常。

修复步骤与代码示例 #

步骤1：修正状态管理与初始化时机 #

用useState声明editorState，并在useEffect中（组件挂载后）处理HTML转换：

import { EditorState, ContentState, convertFromHTML } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import { useRef, useState, useEffect } from 'react';

const YourComponent = () => {
  const divRef = useRef(null);
  // 初始化空编辑器状态
  const [editorState, setEditorState] = useState(EditorState.createEmpty());

  // 依赖ViewChecklistItem变化，重新生成编辑器内容
  useEffect(() => {
    if (divRef.current && ViewChecklistItem.length > 0) {
      // 构造纯静态表格HTML，去掉React交互组件
      const staticTableHTML = `
        <table id="checklist">
          <tr>
            <th>Task List</th>
            <th>Assignee</th>
            <th>Status</th>
            <th>Comments</th>
          </tr>
          ${ViewChecklistItem.map(row => `
            <tr key="${row.TaskId}">
              <td width="45%">${row.TaskName}</td>
              <td>${row.AssigneeName}</td>
              <td>${row.Status}</td>
              <td><span>View Log</span></td>
            </tr>
          `).join('')}
        </table>
      `;

      const blocksFromHTML = convertFromHTML(staticTableHTML);
      const contentState = ContentState.createFromBlockArray(
        blocksFromHTML.contentBlocks,
        blocksFromHTML.entityMap
      );
      setEditorState(EditorState.createWithContent(contentState));
    }
  }, [ViewChecklistItem]);

  return (
    <>
      {/* 隐藏的Ref容器，仅用于辅助生成静态HTML */}
      <div ref={divRef} style={{ display: 'none' }}></div>

      <Editor
        editorState={editorState}
        onEditorStateChange={setEditorState}
        wrapperClassName="wrapper-class"
        editorClassName="editor-class"
        toolbarClassName="toolbar-class"
      />

      {/* 带交互的表格单独渲染，不放入富文本编辑器 */}
      <div className='row'>
        <div className='col-lg-12'>
          <table id="checklist">
            {/* 原带Select的交互表格代码 */}
          </table>
        </div>
      </div>
    </>
  );
};

export default YourComponent;

步骤2：区分静态内容与交互内容 #

Draft Editor是富文本编辑工具，仅支持可编辑的静态富文本，无法承载React交互组件：

• 保留原带Select、操作按钮的表格作为独立操作区域
• 将表格的静态文本内容转换为Draft可识别的ContentState，渲染到编辑器中

步骤3：确保convertFromHTML处理纯HTML #

convertFromHTML只能解析标准HTML标签，不能处理React组件编译后的属性（如onClick、data-*），必须手动构造纯静态HTML字符串，或从后端直接获取纯HTML内容。

关键注意事项 #

• 函数组件必须使用useState、useEffect管理状态与副作用，禁止使用类组件的this.state
• 访问Ref必须在组件挂载后，即useEffect的回调函数内
• Draft Editor不支持渲染React交互组件，仅能处理静态富文本内容

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