Froala 编辑器和 React 动态导入答案

【问题标题】：Froala editor and React dynamic importFroala 编辑器和 React 动态导入
【发布时间】：2018-03-12 15:11:39
【问题描述】：

我在基于 create-react-app 的网页中使用 Froala 编辑器。当我创建一个包时，它表明 froala_editor.pkgd.min.js 占用了大量的包大小。为了解决这个问题，我决定使用动态导入，这里描述了https://serverless-stack.com/chapters/code-splitting-in-create-react-app.html。所以我创建了一个 HOC

import React, { Component } from 'react';

import Callback from '../Callback';

function asyncComponent(importComponent) {
    class AsyncComponent extends Component {
        constructor(props) {
            super(props);

            this.state = {
                component: null
            };
        }

        async componentWillMount() {
            const { default: component } = await importComponent();

            this.setState({
                component: component
            });
        }

        render() {
            const C = this.state.component;

            return C ? <C {...this.props} /> : <Callback />;
        }
    }

    return AsyncComponent;
}

export default asyncComponent;

并包含编辑器

const Editor = asyncComponent(() => import('../FroalaEditorComponent'));

我想说，bunlde 部分已经解决，因为我得到了两个块，一个包含编辑器，另一个不包含。它还缩短了加载时间。

但是我面临这样的设置的另一个问题。当带有编辑器的页面加载时，它只显示几个图标。

其他按钮出现，当我在 Chrome 中打开控制台窗口时，不知道为什么会出现这种行为。

【问题讨论】：

标签： reactjs asynchronous froala

【解决方案1】：

似乎在加载所有编辑器插件之前正在初始化编辑器。所有编辑器插件都应该在初始化之前加载，以便工具栏中的按钮。

【讨论】：

任何想法如何确保插件加载？
不幸的是，我不熟悉 React 来帮助解决这个问题，但我相信你应该在所有编辑器 JS 文件加载后导入编辑器组件。