從按鈕加載反應組件單擊 Extjs

Question

我目前正在將反應項目與現有的 extjs 項目集成。要求是在單擊按鈕時在 extjs 頁面中加載反應組件，按鈕位於 ext 項目中

Answer 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()
});

和索引。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>

小提琴

或者，您使用面板的模板或 htmn 屬性在 extjs 面板的主體中創建一個具有某些 ID 的 div，並在那里呈現您的反應項目。

PS 將 extjs 與反應集成是非常糟糕的主意。

從按鈕加載反應組件單擊 Extjs

問題描述

1 個解決方案

解決方案1
1 2020-06-18 19:16:14

從按鈕加載反應組件單擊 Extjs

問題描述

1 個解決方案

解決方案1 1 2020-06-18 19:16:14

解決方案1
1 2020-06-18 19:16:14