reactjs - Polaris 导航 onclick 方法
问题描述
我正在使用 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() 方法。如何创建打印所选项目标签的方法。因此,如果他们单击第一项,回调函数将被调用并打印“摘要”。我似乎无法将这些碎片拼凑在一起。任何帮助都会很棒!
解决方案
您应该使用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>
推荐阅读
- azure - Azure Web 服务 IP 地址
- javascript - 与以下代码段等效的反应挂钩是什么?
- javascript - 我可以在 PDF 中运行 WebAssembly 吗?
- javascript - 有没有办法在尝试修改它时覆盖 Object 以实例化一个属性?
- c++ - c++ 中浮点数的 a = -a 和 *= -1 有区别吗?
- excel - 用户窗体在初始化代码时不填充
- python - 我的 jupyter 笔记本是笔记本不工作
- django - Django - 密码字段上的“此字段是必需的”错误
- multithreading - 设置要在 Julia Pro 中手动使用的线程数
- regex - 正则表达式 RE2:提取字符串末尾括号内的文本,包括括号,如果有多个,则仅提取最后一组