Question

我的情况是我将网站的前端编写为微服务。我网站的每个功能部分都是与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。我需要一种方法在这个阶段（从这个单独的应用程序）重新呈现交付应用程序，通过以某种方式访问函数或强制应用程序重置？这是可能的还是除了页面重新加载之外还有其他解决方法吗？

Answer 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)
}

这是工作演示。

explained in the doc

Answer 2

我是React Habitat的原始创建者。您的所有应用程序都可以通过助焊剂观察者或者像redux这样的人互相交谈。

我建议flux反应栖息地正常，因为个别商店保持它的重量轻而不是在redux中的一个BIG商店，你可能在栖息地情况下有死代码。

您需要创建一个应用程序导入的公共存储库，以便在更改它时，另一个将获得更新。如果有帮助，我可以稍后将演示放在一起。

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

2 个答案: