如何解决React-Quill使用quill-image-resize-module-react时的图片调整大小警告？

该警告的核心原因是imageResize模块被重复注册：如果你的注册代码写在组件内部，每次组件重渲染时都会重复执行注册逻辑，Quill检测到同一个模块路径被多次赋值就会抛出覆盖警告。

• 方案1：保证模块仅注册一次 #

  把注册逻辑移到组件定义外部，全局仅执行一次注册，避免重渲染重复触发：

  // 写在组件外部，页面初始化时仅运行1次
  import Quill from 'quill'
  import ImageResize from 'quill-image-resize-module-react'
  Quill.register("modules/imageResize", ImageResize);
  
  // 组件内部正常调用ReactQuill即可
  const YourEditorComponent = () => {
    // 组件内部业务逻辑...
  }
  

  如果你需要把注册逻辑放在组件内部，可以用useEffect包裹，空依赖项保证仅组件挂载时执行一次：

  useEffect(() => {
    Quill.register("modules/imageResize", ImageResize);
  }, [])
  

• 方案2：注册时主动关闭重复注册警告 #

  如果你确认重复注册不会影响功能正常运行，可以在注册时传入第三个参数true，直接关闭Quill的模块覆盖警告：

  Quill.register("modules/imageResize", ImageResize, true);
  

• 方案3：删除手动注册代码 #

  quill-image-resize-module-react的部分版本已经内置了模块自动注册逻辑，你手动写的注册代码属于冗余操作，可以直接删除这行注册代码，仅在ReactQuill的modules配置项中声明使用imageResize即可正常使用功能。

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