北极星导航onclick方法

Question

我正在使用 shopify polaris 的导航组件。它的文档在这里：

https://polaris.shopify.com/components/structure/navigation

假设我在 Navigation.js class 中设置了一个导航组件，如下所示：

<Navigation location="/">
      <Navigation.Section
        items={[
          {
            url: '/path/to/place',
            label: 'Summary',
            icon: 'home',
            selected:true
          },
          {
            url: '/path/to/place',
            label: 'Orders',
            icon: 'orders',
            badge: ''
          },
          {
            url: '/path/to/place',
            label: 'Products',
            icon: 'products',
          },
        ]}
      />
</Navigation>

在我上面发送的link中，它谈到了onClick()方法。我如何创建一个方法来打印所选项目的标签。因此，如果他们点击第一项，回调函数将被调用并打印 "Summary"。我似乎无法将各个部分放在一起。任何帮助都会很棒！

Answer 1

您应该将它与 Navigation.Section 项一起传递，如下所示：

<Navigation location="/">
      <Navigation.Section
        items={[
          {
            url: '/path/to/place',
            label: 'Summary',
            icon: 'home',
            selected:true,
            onClick: () => console.log('Summary')
          },
          {
            url: '/path/to/place',
            label: 'Orders',
            icon: 'orders',
            badge: '',
            onClick: () => console.log('Orders')
          },
          {
            url: '/path/to/place',
            label: 'Products',
            icon: 'products',
            onClick: () => console.log('Products')
          },
        ]}
      />
</Navigation>

北极星导航onclick方法

Polaris navigation onclick method

reactjs

shopify-app

polaris