如何在ExtJs组件中加载React应用程序/库

Question

我们正在使用Extjs 3.1，并尝试将Reactjs集成进去。 我们有一个供应商库，其中包含打包的react、react-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可以导入它（作为单独的库??）

- Nnp

---

这个问题解决了吗？你的解决方案是什么？ - HollyOS

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

ExtJS 5及以上版本的Fiddle链接： https://fiddle.sencha.com/#view/editor&fiddle/2l11

- Saurabh Nemade

---

谢谢Saurabh，尽管我已经包含了单独的捆绑包，但我仍然得到“React未定义”的错误。另外，我该如何从应用程序捆绑包中访问“MyApp”，因为ReactDom需要<App/>实例。我已经编辑了我的问题并进行了更多的澄清。 - Nnp

我强烈建议在React 18中为beforedestroy事件添加一个监听器，以便执行domRoot.unmount()。 - httpete

Answer 2

所以，起初找出这个问题的过程有点复杂。在网上进行了许多研究后，我幸运地能够组合出一个可行的示例，其中详细概述在这篇 Medium 文章中。在此大纲中，我介绍了以下内容：

• 建立一个基本的 React 库（带 JSX）
• 转译库文件
• 使用脚本标签在浏览器中使用该库
• 使用简单的 http 服务器提供演示服务
• 使用 webpack 进行打包
• 将库集成到 Ext JS 应用程序中

---

React 在 ExtJS 中

创建一个简单的 React 库，可在 Sencha Ext JS 应用程序中使用

将 React 添加到现有的 Ext JS 应用程序中可能会很具有挑战性。截至今天（2020 年 8 月 14 日），关于如何将 React 应用程序最佳地整合到现有的 Ext 应用程序中，目前只有一些解决方案存在于网络中。然而，没有很好的方法可以将组件集成到更模块化的级别或以一种允许使用 JSX 的方式。

最近，我解决了这个确切的问题。虽然我们都希望能够丢弃一个项目并开始新的工作，但很不幸，在大多数情况下，这不是现实。在可行的情况下，通常最好的解决方案是允许将新内容集成到现有系统中。特别是在本例中，目标是允许前端工程团队开发新的 React 内容，同时将其集成到现有应用程序中，并逐步转换旧内容。

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

- HollyOS