1

我正在使用 shopify 北极星的导航组件。它的文档在这里:

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

假设我在我的Navigation.js类中设置了一个导航组件,如下所示:

<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>

在我上面发送的链接中,它谈到了 onClick() 方法。如何创建打印所选项目标签的方法。因此,如果他们单击第一项,回调函数将被调用并打印“摘要”。我似乎无法将这些碎片拼凑在一起。任何帮助都会很棒!

4

1 回答 1

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>
于 2018-12-04T09:59:11.563 回答