Question

我正在构建一个React窗口小部件，可以通过一个build js文件将其加载到不同的网站上。

我从主应用可以收听的应用中添加了事件触发。

但是，我正在寻找方法，以便主站点可以调用React应用程序中定义的函数，以便可以更改数据。

我曾尝试从React Components导出函数，但发现很难返回本地状态或更新任何状态值。

<div id="root"></div>

<script src="./loginScript.js"></script>
  <script type="text/javascript">
      document.addEventListener('login', (data) => {
        console.log('Logged in');
        console.log(data);
      });
  </script>

所以现在我希望能够以其他方式做到这一点。

window.loginApp.updateUserName('Tom');

将应用程序状态更改为Tom等。

Answer 1

如果我理解正确，您想在另一个非反应性应用程序中使用React组件。

如果是这种情况，则需要使用webpack或rollup之类的东西来创建可与commonJS，amd一起使用或直接将其添加到标签中的版本

以下是使用webpack处理此事的示例：

https://webpack.js.org/guides/author-libraries/#authoring-a-library

一旦构建了LoginApp库，在另一个站点中您将执行以下操作：

<!doctype html>
<html>
  ...
  <script src="http://some-location/LoginApp"></script>
  <script>
    window.LoginApp.updateUserName('Tom')
    // ...
  </script>
</html>

如何从应用程序外部访问React？

1 个答案: