Question

在我的项目中，我想使用CKEditor5。问题是，此版本与IE11不兼容，所以我的目标是延迟加载CKEditor5组件，并且当检测到IE11时，我不想简单地加载那些组件。

当像这样import CKEditor from "@ckeditor/ckeditor5-react";导入组件时，它只是导入类，但是使用React.lazy时，导入组件用React.LazyExoticComponent包装。

我需要根据文档https://ckeditor.com/docs/ckeditor5/latest/features/markdown.html创建GFMDataProcessor的实例

但是对于动态导入，我无法执行此操作，因为这行代码会引发错误，并且我不知道应该传递什么参数，因为GFMDataProcessor是React.LazyExoticComponent而不是{{1 }}类。

GFMDataProcessor

另一个问题是我的CKEditor配置，它也必须延迟加载，这与上面的问题相同，//Expected 1 arguments, but got 0 const markdownPlugin = (editor) => { editor.data.processor = new GFMDataProcessor() }再次是ClassicEditor而不是类，我必须传递给{ {1}}属性导入的组件，而不是用React.LazyExoticComponent包装的组件。有什么方法可以从包装的一个或任何其他方法中提取动态导入的组件，怎么解决？

editor

这是我的动态导入

React.LazyExoticComponent

在DOM结构中的用法

const ckeditorProps = {
        data: data,
        editor: ClassicEditor,
        onChange: (event, editor) => {
            const data2 = editor.getData();
            if (data2 !== data) {
                this.onChange(data2, this.state.selectedCultureCode, true);
            }
        },
        config: editorConfiguration
    }

Answer 1

我不知道您为什么将要异步获取的所有内容包装到React.lazy组件中。您只需要在需要时正常获取它们即可。也许以下内容将为您工作：

let ClassicEditor, GFMDataProcessor;

const LazyCKEditor = React.lazy(() => {
    return Promise.all([
        import("@ckeditor/ckeditor5-build-classic"),
        import("@ckeditor/ckeditor5-react"),
        import("@ckeditor/ckeditor5-markdown-gfm/src/gfmdataprocessor")
    ]).then(([ _ClassicEditor, _CKEditor, _GFMDataProcessor ]) => {
        ClassicEditor = _ClassicEditor;
        GFMDataProcessor = _GFMDataProcessor;

        return _CKEditor;
    });
});

用React.lazy

1 个答案: