reactjs - 如何在 ExtJs 组件中加载 React app/Lib

Question

我们正在使用Extjs 3.1，我们正在尝试将reactjs集成到其中。我们有 vendor 库，其中包含 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 容器中。

EDIT:clarifying bit more.

1. 由于我无法选择从 cdn 加载外部依赖项(react、redux 等)，因此如何单独捆绑它以及什么类型(commonjs、umd 或 var)
2. 如何捆绑我的应用程序，以便 ExtJS 可以导入它(作为单独的库？？)

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