CKEditor 在每次状态/道具更改后重新渲染

Question

目前我正在使用 Next.js 和 CKEditor 5 开发一个项目。我创建了一个要在页面上使用的编辑器组件。由于我需要父页面上输入的值，因此我使用 state 和 setState 作为道具。

我的代码如下所示：

页：

import dynamic from "next/dynamic";
import { useState } from 'react';

export default function Create() {
    const Editor = dynamic(() => import("../components/MyEditor"), { ssr: false });

    const [text, setText] = useState("")

    const handleTextInput = (textInput) => {
        setText(textInput)
    }

    return (
        <>
            <div key="editor1div">
                <Editor key="editor1" handleInput={handleTextInput} data={text} />
            </div>
        </>
    )
}

编辑器组件：

import Editor from '../../ckeditor5-custom-build/build/ckeditor'
import { CKEditor } from '@ckeditor/ckeditor5-react'
import '../../ckeditor5-custom-build/build/translations/de';


const MyEditor = (props) => {

    const editorConfiguration = {
        toolbar: {
            items: ['bold', 'italic', 'underline', '|', 'undo', 'redo'],
        }
    };

    return (
        <>
            <CKEditor
                editor={Editor}
                config={editorConfiguration}
                data={props.data}
                onChange={(event, editor) => {
                    props.handleInput(editor.getData())
                }}
            />
        </>
    );
}

export default MyEditor

我的问题： 每次按下按键时，编辑器都会重新渲染。这意味着它也会失去焦点，从而导致糟糕的用户体验。据我了解，为编辑器设置一个键应该可以防止每次道具更改时重新渲染，但它不起作用。正如其他类似问题中所建议的，我尝试了 uuid 的 v4()-Method 作为关键，但这也没有解决问题。

我希望的解决方案： 在最好的情况下，编辑器不会重新渲染输入的每个新字符并保持不变。或者，如果这是不可能的，我也可以使用一种解决方案，在该解决方案中，我手动将焦点设置为编辑器，或者状态不会永久更新，而仅单击页面本身的按钮。

有人遇到类似问题或知道解决方案吗？

亲切的问候

罗伯特

Answer 1

我自己找到了解决方案。对于遇到类似问题的每个人：原因是组件内部的动态导入。如果动态导入在组件外部，则它可以工作：

import dynamic from "next/dynamic";
import { useState } from 'react';

const Editor = dynamic(() => import("../components/MyEditor"), { ssr: false });

export default function Create() {

    const [text, setText] = useState("")

    const handleTextInput = (textInput) => {
    setText(textInput)
    }

    return (
        <>
            <div key="editor1div">
                <Editor key="editor1" handleInput={handleTextInput} data={text} />
            </div>
        </>
    )
}