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

我们正在使用ExtJS3.1，并试图将reactjs集成到。 我们有供应商库，其中包含react、reacr-dom、redux和其他lib，并作为脚本打包和包含

这是我的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容器中的帮助

编辑：进一步澄清

由于我没有从cdn加载外部依赖项（react、redux等）的选项，我如何单独绑定它以及绑定的类型（commonjs、umd或var）

如何捆绑我的应用程序，以便ExtJS可以导入它（作为单独的库？？）

---

这是你可以做到的

使用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');
                }
            }
        }]
    });
});

链接到小提琴（ExtJS 3.4.1）：

使用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（extjs5及以上）：

因此，最初解决这个问题有点复杂。网上有很多研究。幸运的是，我能够整理出一个我在一份报告中概述的工作示例。在这个提纲中，我回顾了：

• 构建基本React库（使用JSX）
• 图书馆的运输
• 使用脚本标记在浏览器中使用库
• 使用简单的http服务器提供演示
• 与网页包捆绑
• 集成到ExtJS应用程序中

---

在ExtJS中作出反应 创建可在Sencha Ext JS应用程序中使用的简单React库

向现有ExtJS应用程序添加React可能是一项挑战。截至今天（2020年8月14日），关于如何最好地将React应用程序合并到现有Ext应用程序中，目前只有少数解决方案。不过，也就是说，没有什么好方法可以在更模块的级别或以允许JSX通用的方式合并组件

最近，我处理了这个问题。虽然我们都想扔掉一个项目，开始一个新的项目，但不幸的是，在大多数情况下，这并不是现实。如果可能，最好的解决方案通常是允许将新内容集成到现有系统中。在这种特殊情况下，目标是允许前端工程团队在React中开发新内容，同时集成到现有应用程序中，并按节奏转换遗留内容

---

在本指南中，我将创建一个React库，用于加载带有两个子组件的基本标题。然后，我将把这些代码转换成一个可重用的npm包，可以在浏览器和带有webpack、babel和typescript的节点中使用。从那时起，我们可以通过React vanilla JS库轻松地将React库集成到Ext容器中。

感谢Saurabh，我得到了未定义的“React”，尽管我包含了单独的包。另外，我如何从应用程序包访问“MyApp”，因为ReactDom需要实例。我对我的问题做了进一步的澄清。这个问题解决了吗？你的解决方案是什么？