Reactjs 使用React.lazy加载CKEditor5组件

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

当像这样导入组件时，

从“@CKEditor/ckeditor5 react”导入CKEditor

它只是导入类，但是使用

React.lazy

import组件包装为

React.LazyExoticComponent

我需要根据文档创建

GFMDataProcessor

的实例

但是使用动态导入，我无法做到这一点，因为这行代码会抛出错误，我不知道应该传递什么参数，因为

GFMDataProcessor

是

React.LazyExoticComponent

而不是

GFMDataProcessor

类

//Expected 1 arguments, but got 0  
const markdownPlugin = (editor) => { editor.data.processor = new GFMDataProcessor() }

另一个问题是我对CKEditor的配置，它也必须是延迟加载的，这是与上面相同的问题，

ClassicEditor

再次是

React.LazyExoticComponent

而不是class，我必须传递到

编辑器

属性导入组件，不是用

React.LazyExoticComponent

包装的。是否有某种方法可以从包装的组件中提取动态导入的组件，或者有其他方法可以解决这个问题

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
    }

这是我的动态导入

const CKEditor = React.lazy(() => import("@ckeditor/ckeditor5-react"));
const ClassicEditor = React.lazy(() => import("@ckeditor/ckeditor5-build-classic"));
const GFMDataProcessor = React.lazy(() => import("@ckeditor/ckeditor5-markdown-gfm/src/gfmdataprocessor"));

DOM结构中的用法

<React.Suspense fallback={<div>Loading...</div>}>
    <CKEditor {...ckeditorProps} />
</React.Suspense>

---

我不知道为什么要将任何要异步获取的内容包装到

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

组件中。你应该在需要的时候正常取。也许下面这样的东西对你有用：

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;
    });
});