从按钮加载 React 组件单击 Extjs答案

【问题标题】：Loading React Component From button click on Extjs从按钮加载 React 组件单击 Extjs
【发布时间】：2020-06-18 17:01:00
【问题描述】：

我目前正在将 react 项目与现有的 extjs 项目集成。要求是在单击按钮时在 extjs 页面中加载一个 react 组件，按钮驻留在 ext 项目中

【问题讨论】：

标签： javascript reactjs extjs react-router navigation

【解决方案1】：

这不是那么容易，但你可以从下面的小代码开始：

Ext.create('Ext.panel.Panel', {
    title: 'Hello',
    width: 200,
    height: 300,
    dockedItems: [{
        xtype: 'toolbar',
        items: [{
            text: "Load React Component",
            handler: function () {
                const panel = this.up('panel');
                const e = React.createElement;
                ReactDOM.render(
                    e('div', null, 'React'),
                    panel.body.el.dom
                );
            }
        }]
    }],
    renderTo: Ext.getBody()
});

和 index.html

<HTML>
<HEAD>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <!-- for Production -->
    <!--<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>-->
    <!--<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>-->
</HEAD>
<BODY>
</BODY>

Fiddle

或者您使用面板的模板或 htmn 属性在 extjs 面板的主体中创建一个具有某些 ID 的 div，并在那里呈现您的反应项目。

附：将 extjs 与 react 集成是一个非常糟糕的主意。

【讨论】：

感谢您的回复，但我正在寻找有关您提到的第二种方法的指针。
我已经换了小提琴。请再看看。
我们可以使用 ReactDOM.render 的替代方法吗？并做一些事情来使 ext 从实际的 react 构建（具有组件）中渲染缩小的 js 和 css 文件。根据现实世界场景进行思考。
ExtJs 可以使用 'renderTo' 属性或渲染方法将应用程序渲染到 div 中。 React 可以使用 ReactDOM.render 方法将 app 重新渲染到 div 中。理论上它必须工作。因此，您在 extjs 中创建一个带有一些 id 的 div 并将您的 react 应用程序渲染到这个 div 中，或者您创建一个带有 id 的 div 并将 extjs 应用程序渲染到该 div 中。无论如何，混合它们是非常糟糕的做法。你将对 react 和 extjs 进行两个单独的构建处理。我会避免这样做。