загрузка компонентов CKEditor5 с помощью React.lazy - PullRequest
Новая
       18

загрузка компонентов CKEditor5 с помощью React.lazy

1 голос
/ 23 апреля 2019

В моем проекте я хочу использовать 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>

1 Ответ

0 голосов
/ 04 июля 2019

Я не знаю, почему вы оборачиваете что-либо, что хотите асинхронно, в компоненты 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;
    });
});
...