Modal中useRef为null导致富文本编辑器无法渲染的解决方法

问题核心 #

编辑Modal打开时，refdivEdit.current始终为null，导致富文本编辑器无法初始化。原因是Modal内的DOM元素仅在editModalIsOpen为true时才会渲染，而原代码的useEffect依赖editBlog，此时Modal还未完成DOM渲染，ref尚未绑定到实际元素。

修复步骤 #

1. 调整useEffect依赖与逻辑
   将监听编辑博客的useEffect依赖改为editModalIsOpen和editBlog，确保Modal完全打开后再初始化富文本编辑器，同时增加清理逻辑避免内存泄漏：

useEffect(() => {
  // 仅当Modal打开且ref存在时初始化编辑器
  if (editModalIsOpen && refdivEdit.current && editBlog) {
    if (!rteEdit.current) {
      rteEdit.current = new window.RichTextEditor(refdivEdit.current);
    }
    rteEdit.current.setHTMLCode(editBlog.content || "");
  }

  // 清理函数：关闭Modal时销毁编辑器实例
  return () => {
    if (rteEdit.current) {
      // 根据富文本编辑器API调用销毁方法（若存在），无则直接置空
      rteEdit.current = null;
    }
  };
}, [editModalIsOpen, editBlog]); // 依赖Modal状态和编辑的博客数据

2. 修复编辑表单的语法错误
   编辑表单中的select onChange事件存在语法错误，e.target value应改为e.target.value：

<select
  value={editBlog.subSection}
  onChange={(e) =>
    setEditBlog({ ...editBlog, subSection: e.target.value }) // 修复此处语法错误
  }
>

3. 可选优化：确保DOM完全渲染后初始化
   如果上述修改后仍存在延迟渲染问题，可使用setTimeout保证DOM完全挂载：

useEffect(() => {
  if (editModalIsOpen && refdivEdit.current && editBlog) {
    const timer = setTimeout(() => {
      if (!rteEdit.current) {
        rteEdit.current = new window.RichTextEditor(refdivEdit.current);
      }
      rteEdit.current.setHTMLCode(editBlog.content || "");
    }, 100);

    return () => clearTimeout(timer);
  }

  return () => {
    if (rteEdit.current) {
      rteEdit.current = null;
    }
  };
}, [editModalIsOpen, editBlog]);

修复原理 #

• 依赖editModalIsOpen确保Modal已打开、DOM元素已渲染，ref能获取到实际节点
• 清理函数在Modal关闭时销毁编辑器实例，避免重复创建和内存泄漏
• 修复语法错误防止表单交互时出现运行时报错

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