React中如何渲染Quill编辑器输出？useRef/useState方案遇阻

一、useRef版本崩溃空白的原因及修复 #

你的代码存在两个核心问题：

1. 直接渲染useRef对象：<p>{text}</p>中text是React的Ref对象，并非编辑器内容，React无法渲染这类对象，会触发隐式错误（部分场景下错误未被显式抛出，导致页面空白）。
2. 混合使用id与ref初始化Quill：依赖#editor选择器初始化Quill，可能因React渲染时机或id冲突导致DOM获取异常，同时ref的赋值逻辑也不符合规范。

二、useState版本onChange不触发的原因及修复 #

Quill的编辑事件并非原生DOM事件，无法通过给div绑定onChange直接监听。必须通过Quill实例调用on()方法来绑定编辑器专属事件（如text-change、editor-change）。

三、正确实现代码示例 #

import { useState, useRef, useEffect } from 'react';
import Quill from 'quill';
import 'quill/dist/quill.snow.css'; // 必须引入Quill样式，否则编辑器显示异常

export default function Edi() {
  const [editorHtml, setEditorHtml] = useState('');
  const editorContainerRef = useRef(null); // 保存编辑器容器DOM
  const quillInstanceRef = useRef(null); // 保存Quill实例，方便后续调用API

  useEffect(() => {
    // 通过ref获取DOM元素初始化Quill，避免id冲突问题
    quillInstanceRef.current = new Quill(editorContainerRef.current, {
      theme: 'snow'
    });

    // 监听Quill的文本变化事件
    const handleTextChange = () => {
      // 获取编辑器的HTML内容
      const htmlContent = quillInstanceRef.current.root.innerHTML;
      setEditorHtml(htmlContent);
    };

    quillInstanceRef.current.on('text-change', handleTextChange);

    // 组件卸载时清理事件监听与实例，避免内存泄漏
    return () => {
      quillInstanceRef.current.off('text-change', handleTextChange);
      quillInstanceRef.current = null;
    };
  }, []);

  return (
    <div>
      {/* 编辑器容器，用ref绑定而非id */}
      <div 
        ref={editorContainerRef} 
        style={{ height: '200px', border: '1px solid #e0e0e0', marginBottom: '20px' }}
      ></div>

      {/* 渲染解析后的HTML内容，验证格式与空格 */}
      <h3>渲染效果预览：</h3>
      <div 
        style={{ padding: '10px', border: '1px dashed #ccc' }}
        dangerouslySetInnerHTML={{ __html: editorHtml }}
      ></div>

      {/* 显示原始HTML字符串，方便对比 */}
      <h3>原始HTML内容：</h3>
      <pre style={{ backgroundColor: '#f5f5f5', padding: '10px' }}>{editorHtml}</pre>
    </div>
  );
}

关键注意点 #

• 渲染Quill输出的HTML时，必须使用dangerouslySetInnerHTML，否则会直接显示HTML源码而非解析后的格式。
• 务必引入Quill的样式文件，否则编辑器会丢失布局与交互样式。
• 组件卸载时要移除事件监听并销毁Quill实例，防止内存泄漏。

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