如何利用打开和关闭北极星模式

Question

我使用Shopify Polaris @3.4.0和@1.0.3。还使用shopify-node作为起点。

我通过传递apiKey和shopOrigin值来初始化app桥，如下所示：

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

在我的仪表板组件中，我有一个Modal组件：

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

对于modalActive，我通过将状态设置为true来打开该模型，如下所示：

 this.setState({modalActive: true});

当使用src时，Shopify Polaris Modal使用iframe，在这个视图中，我有一个提交表单。当表单提交时，我想关闭Modal。我尝试过使用应用程序桥来关闭模式，但老实说，我很困惑，这些都是最近发布的版本，所以任何帮助都是值得赞赏的。

Answer 1

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

Answer 2

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

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

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