如何在ExtJs Component中加载React app/Lib

Question

我们正在使用Extjs 3.1,我们正在尝试将reactjs集成到.我们有供应商库,它有react,reacr-dom,redux和其他库被打包并包含在脚本中.

这是我的extjs代码

var CompositeViewer = Ext.extend(Ext.BoxComponent, {
    itemId: 'CompositeViewer',
    requires: [
        'ReactDOM' //my lib file name is vendor.lib.js
    ],
    initComponent: function() {
        Ext.apply(this, {
            autoEl: {
                tag: 'div',
                cls: 'normalize'
            }
        });
        CompositeViewer.superclass.initComponent.apply(this, arg);
    },
    onRender: function(ct, position) {
        CompositeViewer.superclass.onRender.apply(this, arg);
        console.log(ReactDOM); //OFCOURSE ReactDOM is undefined  
        /// HOW TO LOAD/Render REACT APP AND OTHER LIBS
    },
    beforeDestroy: function() {
        CompositeViewer.superclass.onDestroy.apply(this, arg);
    }
});

如何将reactjs/javascript库加载到extjs容器中需要帮助.

编辑:澄清更多.

1. 由于我没有从cdn加载外部依赖项(react,redux等)的选项,我如何单独捆绑它和什么类型(commonjs,umd或var)
2. 如何捆绑我的应用程序,以便ExtJS可以导入它(作为单独的lib ??)

Answer 1

以下是您可以如何做到这一点。

使用 ExtJS 3.4.1 工作示例：

Ext.onReady(function () {
    Ext.create({
        xtype: 'panel',
        renderTo: Ext.getBody(),
        title: 'ExtJS Panel',
        items: [{
            xtype: 'label',
            text: 'ExtJS Compoent'
        }, {
            xtype: 'panel',
            listeners: {
                afterrender: function () {
                    const e = React.createElement;

                    ReactDOM.render(
                        e('div', null, 'ReactJS Component'),
                        this.el.dom
                    );
                    console.log('afterrender');
                }
            }
        }]
    });
});

链接到 Fiddle（ExtJS 3.4.1）： https://fiddle.sencha.com/#view/editor&fiddle/2l12

使用 ExtJS 5 及以上版本工作示例：

Ext.application({
    name: 'Fiddle',

    launch: function () {

        Ext.create({
            xtype: 'panel',
            renderTo: Ext.getBody(),
            requires: [
                'ReactDOM'
            ],
            title: "Some ExtJS Panel",
            items: [{
                xtype: 'label',
                text: "ExtJS Component"
            }, {
                xtype: 'panel',
                id: 'react-panel',
                height: 400,
                initComponent: function () {
                    console.log('do some extjs stuff here');
                    this.superclass.initComponent.apply(this, arguments);
                },
                listeners: {
                    afterrender: function () {
                        console.log();
                        const e = React.createElement;

                        ReactDOM.render(
                            e('div', null, 'ReactJS Component'),
                            this.el.dom
                        );
                        console.log('afterrender');
                    }
                }
            }]
        });
    }
});

链接到 Fiddle（ExtJS 5 及更高版本）： https://fiddle.sencha.com/#view/editor&fiddle/2l11