用React.lazy加載CKEditor5組件

Question

在我的項目中，我想使用CKEditor5。 問題是，此版本與IE11不兼容，因此我的目標是延遲加載CKEditor5組件，並且當檢測到IE11時，我不想簡單地加載這些組件。

當這樣import CKEditor from "@ckeditor/ckeditor5-react";組件時， import CKEditor from "@ckeditor/ckeditor5-react"; 它只是導入類，但是使用React.lazy導入組件被React.LazyExoticComponent包裝。

我需要根據文檔https://ckeditor.com/docs/ckeditor5/latest/features/markdown.html創建GFMDataProcessor實例

但是對於動態導入，我無法執行此操作，因為這行代碼會引發錯誤，並且我不知道應該傳遞什么參數，因為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

我不知道為什么將要異步獲取的所有內容包裝到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;
    });
});