如何使用 App-Bridge 打开和关闭 Shopify Polaris Modal答案

【问题标题】：How to open and close Shopify Polaris Modal using App-Bridge如何使用 App-Bridge 打开和关闭 Shopify Polaris Modal
【发布时间】：2019-01-12 23:05:04
【问题描述】：

我正在使用 Shopify Polaris @3.4.0 和 App-Bridge @1.0.3。还使用 shopify-node-app 作为起点。

我通过像这样传递 apiKey 和 shopOrigin 值来初始化 app-bridge：

<AppProvider apiKey={apiKey} shopOrigin={shopOrigin} 
  <Switch>
      <Route exact path='/admin' component={Dashboard} />
  </Switch>
</AppProvider>

在我的 Dashboard 组件中，我有一个 Modal 组件：

<Modal
   src='https://somewhere/',
   title='title',
   open={modalActive}
/>

我通过将 modalActive 的状态设置为 true 来打开模式，如下所示：

 this.setState({modalActive: true});

Shopify Polaris Modal 在使用 src 时使用 iframe，并且在该视图中我有一个提交表单。我想在提交表单时关闭模态。我曾尝试使用 app-bridge 发送一个操作来关闭模式，但老实说，我很困惑，这些都是最新版本，因此感谢您的帮助。

【问题讨论】：

在 Polaris Github 存储库中提出问题可能是个好主意。制作 Polaris 监控问题的工作人员，他们将是帮助使用它的最佳资源。所以在这个时候无论如何可能没有很多北极星用户。
关于评论他们的回购的好点。仍然对任何可能对我有答案的人开放。
你在哪里读到shopOrigin的值？他们一直在参考如何将它存储在他们的文档中，但它实际上是 iFrame src 值的一部分，但我似乎无法从反应代码中弄清楚如何对其做出反应？！

标签： shopify polaris

【解决方案1】：

长话短说，将函数传递给 Modal primaryAction 道具。其核心是子组件到父组件的状态更改。所以更多的是一个 ReactJS 问题。

【讨论】：

嘿，你能说得更具体点吗 - 假设我的模式是或注册过程，它成功完成。模态primaryAction在父帮助中设置如何？可以发一些代码吗？

【解决方案2】：

好吧，有一个类似的问题，承认这一点有点尴尬，但是如果它可以为你节省一个半小时，那就太好了。

Shopify 的模态文档使用active 来保持外部触发模态的状态。但不要忘记使用open 作为<Modal> 组件的实际道具：

<Modal
  open={active}
  ...rest of props
/>
    ...content
</Modal>

【讨论】：