如何在动态导入的React-Quill中获取ref？现有实现报错

警告的核心原因是React-Quill组件本身不接受ref作为常规prop，你之前的ref转发方式不符合它的设计逻辑。要正确获取Quill实例的ref，需用React.forwardRef包装动态导入的组件，让ref能正确传递到内部的React-Quill实例上。

修改后的代码如下：

import { dynamic } from 'next/dynamic';
import type ReactQuill from 'react-quill';
import type { ReactQuillProps } from 'react-quill';

// 用React.forwardRef包装动态导入的组件，实现ref转发
const ReactQuill = dynamic(
  async () => {
    const { default: RQ } = await import('react-quill');
    return React.forwardRef<ReactQuill, ReactQuillProps>((props, ref) => {
      return <RQ ref={ref} {...props} />;
    });
  },
  { ssr: false }
);

// 使用时直接传递ref即可
<ReactQuill
  ref={quillRef}
  value={field.value}
  modules={modules}
  formats={formats}
  onChange={(content) => {
    field.onChange(content);
  }}
  theme="snow"
  defaultValue=""
  placeholder="Write Here...."
  className="h-full text-base border-none"
  preserveWhitespace
/>

复制到剪贴板功能实现示例 #

拿到Quill实例后，可通过其API获取内容并完成复制：

const copyToClipboard = () => {
  if (quillRef.current) {
    // 获取富文本内容，也可用getText()获取纯文本
    const content = quillRef.current.getHTML();
    navigator.clipboard.writeText(content)
      .then(() => {
        console.log('内容已复制到剪贴板');
      })
      .catch(err => {
        console.error('复制失败:', err);
      });
  }
};

这样修改后，既能正确获取Quill的ref，也会消除原有警告，顺利实现复制功能。

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