一旦我在下一个 js 中输入输入字段，反应草稿所见即所得就会闪烁

Question

输入框一直在闪烁。这是我使用代码（编辑器组件）的地方。我也在用 next/dynamic 导入包，我不知道这是否有帮助，谢谢

<Editor
      editorState={editorState}
      wrapperStyle={{ backgroundColor: "white", height: "300px" }}
      onEditorStateChange={setEditorState}
    />

Answer 1

你能不能检查一下不要动态导入，还在闪烁？

import { Editor } from "react-draft-wysiwyg";

import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";

Answer 2

我建议尝试 trim 这个问题，在什么情况下会发生，在什么情况下不会。

确保 css 在那里。（闪烁通常是错误的样式）
确保使用 EditorState.createEmpty()
还在闪烁？强制静态导入以检查是否有问题
还在闪烁？删除 onChangeHandler 将其留空。
给我反馈 :)

这是应该有效的官方文档示例

import React, { Component } from 'react';
import { EditorState } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';

const MyEditor = () => {
  const [editor, setEditor] = useState(EditorState.createEmpty());
  return (
    <Editor
      editorState={editor}
      wrapperClassName="demo-wrapper"
      editorClassName="demo-editor"
      onEditorStateChange={setEditor}
    />
  )
}

Answer 3

已找到修复程序，但不知道是否合适我用 useMemo Hook

包装了动态导入

const Editor = useMemo(() => {
return dynamic(
  () => import("react-draft-wysiwyg").then((mod) => mod.Editor),
  { ssr: false }
);}, []);

一旦我在下一个 js 中输入输入字段，反应草稿所见即所得就会闪烁

react-draft-wysiwyg flickering once i type into the input field in next js

reactjs

draftjs

next.js

react-draft-wysiwyg