从同一页面上的其他 React 应用程序访问 React 应用程序答案

【问题标题】：Access React app from other React app on the same page从同一页面上的其他 React 应用程序访问 React 应用程序
【发布时间】：2017-08-29 07:25:55
【问题描述】：

我有一种情况，我将网站的前端编写为微服务。我网站的每个功能部分都是一个与 css 和 html 捆绑在一起的 react-habitat 应用程序。我已经这样做了，因此我可以在网站上的任何地方重复使用这些部分。

然而，我的问题是在结帐区域，我需要将登录应用程序中的 customerId（成功响应）传递到送货地址应用程序，以便我可以恢复默认地址。我不想创建新应用程序并复制登录和送货地址应用程序的代码，因为我需要在网站的其他地方使用它们。

所以我的问题是。如何在不重新加载页面的情况下将此 customerId 从我的登录应用程序传递到我的送货地址应用程序？有没有办法从反应应用程序外部访问反应应用程序方法？

登录点击处理程序：

clickHandler(e) {
    e.preventDefault();
    let payload = {"email":this.props.email, "password":this.props.password};

        AuthenticationApp.login(payload).then((response) => {
            if (this.props.referrer === "checkout") {
                $("#checkout_login-register-tab").addClass("done");
                $("#checkout_login-delivery-tab").removeClass("todo");

                // Temporary hack to reload page until we can pass new user session into delivery/billing react app from here.
                location.reload();
            }
            this.props.updateParentState({isLoggedIn: true});
        })
        .catch(function(response){
            console.log("res2 - catch", response)
        });
    }

我已在此处强制重新加载页面，以便收货地址应用程序重新呈现并从服务中获取 customerId。我需要一种方法在这个阶段（从这个单独的应用程序）重新渲染交付应用程序，或者通过某种方式访问一个函数或强制应用程序重置？这可能吗？或者除了重新加载页面之外还有其他解决方法吗？

【问题讨论】：

您的收货地址应用程序是一个非反应应用程序，您的登录是一个反应组件，您需要将一些数据从您的登录应用程序传递到送货应用程序，对吗？
不，交付应用程序是一个单独的反应应用程序。因此，我需要通过从登录应用程序访问交付反应应用程序中的一个函数，将一个变量从 1 传递到另一个变量，这样我就可以更新状态，从而获得对这个应用程序的控制权。
如果您想在登录后使用某些数据（在您的情况下为客户 ID），您需要在本地存储或 cookie 中设置会话数据，然后您可以在交付应用程序的任何位置访问该数据.您可以为您的登录和交付应用添加一些代码吗？
我的问题不是在此处存储数据 - 它在交付应用程序中获得了对这些数据的控制权，而无需重新加载页面。在页面重新加载时，我可以访问从服务中获取的 customerId - 但是为了防止页面重新加载，我需要以某种方式重置页面上的交付应用程序以便它再次访问服务，或者访问交付应用程序中的功能以更新状态（强制重新渲染）。
将标签“habitat”更改为“react-habitat”。拆分模棱两可的标签“栖息地”的部分努力

标签： javascript reactjs react-habitat

【解决方案1】：

你可以这样做：

loadDeliveryApp(data) {
   ReactDOM.render(<DeliveryApp data={data} />, document.getElementById('delivery-app'))
   ReactDOM.unmountComponentAtNode(document.getElementById("login-app"))
}

clickHandler(e) {
  e.preventDefault()
  // your login stuff

  loadDeliveryApp(data)
}

这是工作演示。

https://codepen.io/madhurgarg71/pen/dzgxMd

【讨论】：

【解决方案2】：

我是 React Habitat 的原始创建者。您的所有应用程序都可以通过 Flux Observer 或类似 redux 的方式相互通信。

我建议 flux 正常响应栖息地，因为各个商店保持轻量级，而不是 redux 中的一个大商店，在那里您可能在栖息地情况下有死代码。

您需要创建一个公共存储，供您的两个应用程序导入，这样如果其中一个对其进行更改，另一个将获得更新。如果有帮助，我可以稍后制作一个演示。

【讨论】：

这样的代码示例会很有用。之前没用过 Flux。