[英]Side Navigation (Shopify Polaris Library) active item selection
I'm trying to show the active side navigation items in Shopify Polaris Navigation components.我正在尝试在 Shopify Polaris Navigation 组件中显示活动的侧边导航项目。
Here I have tried in few ways, problem is when I'm clicking nav items 2 times then showing the currently active nav link!在这里我尝试了几种方法,问题是当我点击导航项 2 次然后显示当前活动的导航链接时!
Can you suggest me better efficient code to solve this problem?你能建议我更有效的代码来解决这个问题吗? If any more dynamic solutions available please suggest!
如果有更多可用的动态解决方案,请提出建议!
import React, { Fragment, useState } from "react";
import { Frame, Navigation, Page } from "@shopify/polaris";
import { GiftCardMinor } from "@shopify/polaris-icons";
import { useNavigate } from "react-router-dom";
const LeftNavigation = ({ pageTitle, loading, children }: any) => {
const [selected, setSelected] = useState([false, false]);
const navigate = useNavigate();
const handleSelect = (index) => {
// const newFilter = [...selected];
// newFilter.fill(false, 0, newFilter.length);
// newFilter[index] = true;
// setSelected(newFilter);
const newArray = selected.map((item, itemIndex) => {
return itemIndex === index
? (selected[index] = true)
: (selected[itemIndex] = false);
});
setSelected(newArray);
};
return (
<Fragment>
<Frame
navigation={
<div style={{ marginTop: "4rem" }}>
<Navigation location="/">
<Navigation.Section
title="nav items"
items={[
{
label: "one",
icon: icon1,
selected: selected[0],
onClick: () => {
handleSelect(0);
navigate("/one");
},
},
{
label: "two",
icon: icon2,
selected: selected[1],
onClick: () => {
handleSelect(1);
navigate("/two");
},
},
]}
/>
</Navigation>
</div>
}
></Frame>
</Fragment>
);
};
export default LeftNavigation;
In order to make the "active" state more dynamic it should probably only store the id of the active menu item.为了使“活动”状态更加动态,它应该只存储活动菜单项的 ID。 When mapping/rendering the menu items check explicitly against the current state value.
在映射/呈现菜单项时,会根据当前状态值明确检查。 The
onClick
handler should pass the currently clicked-on item's "id" value to the callback handler. onClick
处理程序应将当前单击项目的“id”值传递给回调处理程序。
Example using the "target path" as the id value*:使用“目标路径”作为 id 值的示例*:
const LeftNavigation = ({ pageTitle, loading, children }: any) => {
const [selected, setSelected] = useState<string | null>(null);
const navigate = useNavigate();
const handleSelect = (selectedId) => {
setSelected(selected => selected === selectedId ? null : selectedId);
};
return (
<Fragment>
<Frame
navigation={
<div style={{ marginTop: "4rem" }}>
<Navigation location="/">
<Navigation.Section
title="nav items"
items={[
{
label: "one",
icon: icon1,
selected: selected === "/one",
onClick: () => {
handleSelect("/one");
navigate("/one");
},
},
{
label: "two",
icon: icon2,
selected: selected === "/two",
onClick: () => {
handleSelect("/two");
navigate("/two");
},
},
]}
/>
</Navigation>
</div>
}
></Frame>
</Fragment>
);
};
*Note: the id value can be anything, but you should ensure it's unique per menu item if you want up to only one active at-a-time. *注意: id 值可以是任何值,但如果您希望一次最多只有一个活动,则应确保它在每个菜单项中都是唯一的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.