我想在基于AMD requirejs的现有应用程序上嵌入React组件。

我有3个文件：

component.react.js

该模块是否负责将react组件安装在DOM和webpack条目文件中。输出文件为component.js

import React from 'react';
import ReactDOM from 'react-dom';
import Configurator from './main';

module.hot && module.hot.accept();

const mount = () => {
    ReactDOM.render(<Configurator />,document.querySelector('#product-configurator'));
}

// CASE OK: This way,Configurator is rendered but HMR works as expected
// mount();

// CASE KO: This way,Configurator is rendered but HMR doesn't work
window && (window.configuratorMount = mount);

main.js

是虚拟的React组件：

import React from 'react';
export default () => <h1>Change me!</h1>;

configurator.js

AMD负责启动反应组件吗？

define([
    './component'
],function(reactComponent) {
    return function (config) {
        window.configuratorMount && window.configuratorMount(config);
    }
});

我想通过调用window.configuratorMount函数来调用启动器，但要保持HMR正常工作。

在两种情况下，当我修改main.js文件时，控制台输出都会显示：

[WDS] App hot update...
[HMR] Checking for updates on the server...
[HMR] Updated modules:
[HMR]  - ./app/code/EcommPro/ProductPage/view/frontend/web.react/main.js
[HMR] App is up to date.

但是对于CASE KO，不会更新DOM。