使用React.lazy加载CKEditor5组件

Question

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

当像这样导入组件时

import CKEditor from "@ckeditor/ckeditor5-react";

它只是导入类，但是使用

React.lazy

导入组件会被

React.LazyExoticComponent

包裹。

我需要根据文档创建

GFMDataProcessor

的实例https://ckeditor.com/docs/ckeditor5/latest/features/markdown.html

但是通过动态导入，我无法做到这一点，因为这行代码会引发错误，并且我不知道应该传递什么参数，因为

GFMDataProcessor

是

React.LazyExoticComponent

而不是

GFMDataProcessor

类。

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

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

ClassicEditor

又是

React.LazyExoticComponent

而不是类，我必须传递给

editor

属性导入组件，不是带有

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>

Answer 1

import React, { lazy, Suspense } from 'react';

export default (props) => (
  <Suspense fallback={'Loading...'}>
    <CKEditor {...props} />
  </Suspense>
);

你的 CKEditor 看起来像

import React from 'react';

import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

export default () => (
  <CKEditor
    editor={ClassicEditor}
    ...
  />
);

Answer 2

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

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