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

Question

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

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

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

在“仪表板”组件中，我有一个“模态”组件：

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

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

 this.setState({modalActive: true});

当使用 src 时，Shopify Polaris Modal使用iframe，在该视图中，我有一个提交表单。提交表单后，我想关闭Modal。我尝试使用app-bridge调度一个动作来关闭模式，但是老实说我很困惑，这些都是最新发行的，因此对您的帮助表示感谢。

Answer 1

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

Answer 2

好的，有一个类似的问题，承认这一点有点令人尴尬，但是，嘿，如果它节省了您一个半小时，那就太好了。

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

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