reactjs - 使 React 组件作为 Widget 可用

Question

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

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

仅供引用，我正在使用 create-react-app 样板代码来加载 React 应用程序:

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

Answer 1

您可以按原样创建您的react-app。要使其正常工作，您还需要做两件事。

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

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

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

window.reactWidget.load = loadApp;

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

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