使 React 组件作为 Widget 可用

我有一个复杂的 React 应用程序（包括渲染某些组件的身份验证等），并且有一个特定的组件，一个日期选择器，我希望其他用户将其作为 Google 地图的小部件嵌入到他们的网站上（<script src="my_widget"></script>).

我已经成功地将其作为 iFrame 进行共享，但我想了解如何将其作为“正确的”小部件进行共享。我在 SO 上找到的大多数解决方案都不符合我的理解能力，也许我被指出了一个更菜鸟的解决方案。

仅供参考，我正在使用create-react-app用于加载 React 应用程序的样板代码：

ReactDOM.render(
  <App />,
  document.querySelector("#root")
);

您可以按原样创建您的反应应用程序。要使其正常工作，您还需要做两件事。

1. 提供一种通过主机页面按需加载或呈现应用程序的方法。例如，而不是调用ReactDOM.render(<App />, document.querySelector("#root"));直接在主应用程序中，您可以添加如下方法：

const loadApp = (targetElement) => {
   ReactDOM.render(<App />, targetElement);
};

您可以使用这样的全局变量来公开此方法。

window.reactWidget.load = loadApp;

2. 之后，您需要创建一个 JS 片段，它可以加载捆绑的 javascript 文件，并在从网络加载文件后调用此函数。

 window.reactWidget.load(document.querySelector(#whatever'));