Reactjs 如何与@Shopify/polaris react一起使用新的@Shopify/app桥

Shopify最近发布了他们的新产品，但我不清楚它应该如何与之一起使用

例如，我尝试制作一个React组件，它将使用应用程序bridge和polaris来显示祝酒词

import React, { Component } from "react";
import * as PropTypes from "prop-types";
import { Toast } from "@shopify/app-bridge/actions";
import { Page } from "@shopify/polaris";

class Start extends Component {
  static contextTypes = {
    polaris: PropTypes.object
  };

  showToast() {
    console.log("SHOW TOAST");
    console.log(this.context.polaris.appBridge);
    const toastNotice = Toast.create(this.context.polaris.appBridge, {
      message: "Test Toast",
      duration: 5000
    });
    toastNotice.dispatch(Toast.Action.SHOW);
  }

  render() {
    this.showToast();
    return (
      <Page title="Do you see toast?">
        <p>I do not see toast.</p>
      </Page>
    );
  }
}

export default Start;

import React，{Component}来自“React”；
从“道具类型”导入*作为道具类型；
从“@shopify/app bridge/actions”导入{Toast}；
从“@shopify/polaris”导入{Page}”；
类开始扩展组件{
静态上下文类型={
北极星：PropTypes.object
};
showtoots（）{
console.log（“SHOW TOAST”）；
log（this.context.polaris.appBridge）；
const Toast notice=Toast.create（this.context.polaris.appBridge{
消息：“测试土司”，
持续时间：5000
});
toastNotice.dispatch（Toast.Action.SHOW）；
}
render（）{
这是showtoos（）；
返回(
我看不到吐司

);
}
}
导出默认启动；

但它似乎并没有采取行动。为什么不呢？请注意，我的应用程序包装在AppProvider中，并且应用程序桥已初始化

ReactDOM.render(
  <AppProvider
    apiKey={process.env.REACT_APP_SHOPIFY_API_KEY}
    shopOrigin={queryString.parse(window.location.search).shop}
  >
    <Start />
  </AppProvider>,
  document.getElementById("root")
);

ReactDOM.render(
,
document.getElementById（“根”）
);

---

有什么建议吗？

因此，经过大量调试后，我从Shopify发现，在采取任何行动之前，在App Bridge内部，他们会检查localOrigin是否与appURL（在partners dashboard中输入的URL）匹配。在我的例子中，我有一个后端（heroku上的node.js用于身份验证）和一个前端（firebase上的react bundle），我的应用程序通过点击后端启动，然后如果身份验证被签出，它将重定向到前端。因此localOrigin不匹配。。。嗯，我很高兴能弄明白这一点，因为我为此睡了很多觉。现在的问题是怎么做。。。也许这是可以用AppBridge更新的东西？还是我应该考虑一个更好的设计？

现在有

@shopify/appbridge react

，

Shopify应该还没有关于它的文档。。。但是，有人可以在他们给出答案时更新我的答案。：）

---

注意： 确保有，

staticcontexttype=Context

访问

此.context

以在组件中分派操作/etc。
（希望这能帮你省去几天的痛苦哈哈，我不是React开发者，所以，是的……在示例中，这没有标记为“关键”或任何东西）

---

我也想发表@SomethingOn的评论，但我没有足够的声誉来评论

实际上，您可以调试iframe。在chrome开发工具中，在上面的“top”位置，您实际上可以选择要调试的框架。

选择Shopify应用程序iframe后，键入“window.location”或任何您想要的内容

---

Shopify的文档和示例非常有限，我自己在使用Shopify应用程序时遇到了很多问题，所以我只想尽可能多地传播帮助

我也很困惑。我讨厌他们不断引用shopOrigin，但从来没有真正告诉你如何获得它。没有例子，什么都没有。当加载到iFrame中时，iFrame src将商店作为查询字符串param包含在内，但是

window.location

似乎不在iFrame javascript的范围内？有什么想法吗？