Next.js中react-draft-wysiwyg编辑器输入时出现闪烁问题求助

我之前在Next.js项目里用react-draft-wysiwyg时，也碰到过一模一样的输入闪烁问题，折腾了好一阵才找到根源，大概率是动态导入的配置问题或者Next.js SSR特性和编辑器的客户端渲染冲突导致的。给你几个亲测有效的解决方案：

• 确保动态导入时禁用SSR
  react-draft-wysiwyg依赖浏览器环境的API，服务器端渲染时没法正常初始化，这会直接导致渲染异常和闪烁。你需要调整动态导入的配置，明确禁用SSR：

  import dynamic from 'next/dynamic';
  
  // 正确的动态导入方式
  const Editor = dynamic(() => 
    import('react-draft-wysiwyg').then(mod => mod.Editor),
    {
      ssr: false, // 关键：禁用服务器端渲染
      loading: () => <div className="editor-loading">加载编辑器中...</div> // 可选：添加加载占位
    }
  );
  

  之前的导入如果没加ssr: false，一定要补上，这是解决闪烁最核心的一步。

• 避免不必要的重渲染
  检查你的editorState状态管理逻辑：如果是用useState管理，确保setEditorState没有被意外触发，或者父组件的其他状态变化导致编辑器反复重渲染。可以尝试用React.memo包裹编辑器所在的父组件，减少不必要的渲染次数：

  import React, { memo } from 'react';
  
  const EditorWrapper = memo(() => {
    // 你的编辑器逻辑
    return <Editor editorState={editorState} onEditorStateChange={setEditorState} />;
  });
  

• 检查样式导入与冲突
  编辑器的默认样式如果加载不完整，也会引发渲染闪烁。记得单独导入编辑器的样式文件，并且确保样式在客户端环境加载：

  // 在编辑器组件内部导入样式（确保只在客户端执行）
  import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
  

  另外，你的wrapperStyle可以补充一些更明确的布局属性，比如overflow: 'auto'，避免内容变化时布局跳动：

  <Editor 
    editorState={editorState} 
    wrapperStyle={{ 
      backgroundColor: "white", 
      height: "300px",
      overflow: "auto",
      border: "1px solid #eee" // 可选：添加边框避免布局晃动
    }} 
    onEditorStateChange={setEditorState} 
  />
  

• 排查版本兼容性
  有时候react-draft-wysiwyg和draft-js、React的版本不兼容也会导致奇怪的渲染问题。可以尝试升级到最新的稳定版，确保三者版本匹配：

  npm update draft-js react-draft-wysiwyg
  

先从调整动态导入的配置开始试，这是我当时解决问题的关键步骤。如果还是不行，再依次排查重渲染和样式的问题。

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