React HtmlElement 微前端未在 Shell 应用程序中重新加载

Question

我正在尝试将下面的 react mfe 注入另一个 angular shell 应用程序。 但是，它是第一次加载，但是当它们隐藏或从 dom 中删除然后再次加载时，它无法加载。

您能否帮助解决以下代码中的问题，以便它们可以重新加载或正确隐藏/显示。

提前致谢。

import React, { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import AchPayment from "./AchPayment";
//import createCustomElement from "react-custom-element-builder";

const mount = (el, props) => {
  const { consumerName, token, achTransactionRequest } = props;
  const root = createRoot(el!);

  if (consumerName) {
    if (
      consumerName.toUpperCase() == "APEX" ||
      consumerName.toUpperCase() == "MYFINANCING"
    ) {
      class AchPaymentElement extends HTMLElement {
        connectedCallback() {
          root.render(
            <div>
              <AchPayment {...props} />
            </div>
          );
        }
      }

      customElements.get("ach-payment-element") ||
        customElements.define("ach-payment-element", AchPaymentElement);
    } else {
      return root.render(<h1>Invalid Consumer !</h1>);
    }
  } else {
    return root.render(<h1>Invalid Consumer !</h1>);
  }
};
const props = {
  consumerName: "MyFinancing",
};
const devRoot = document.querySelector("#_myMfe");
mount(devRoot, props);

Answer 1

我推荐这种方法，可能会有所帮助

https://github.com/module-federation/module-federation-examples/tree/master/angular14-react

您可以在这里找到更多文档https://webpack.js.org/concepts/module-federation/