我是React的新手，不完全确定如何设置一些东西：
我有一个顶部导航菜单，它变成了移动设备的汉堡菜单。为了只定义一次菜单项，我认为将它们提取到jsx项的数组中并将该数组用于两种类型的菜单是一个好主意：
export default function Navigation () {
const MenuItems = [
<Link to="/">Home</Link>,
<Link to="/page1">Page 1</Link>,
<Link to="/page2">Page 2</Link>,
<Link to="/page3">Page 3</Link>
];
const isMobile = useMediaQuery({ query: '(max-width: 767px)' });
const isDesktop = useMediaQuery({ query: '(min-width: 1224px)' });
return (
<Nav role='navigation'>
{ isMobile && <BurgerMenu MenuItems={ MenuItems } />}
{ isDesktop &&
<ul>
{ MenuItems.map((item, index) => <li key={index}>{ item }</li>) }
</ul>
}
</Nav>
);
}
我使用反应汉堡菜单作为汉堡菜单：
export default function BurgerMenu({ MenuItems }) {
const [menuOpen, setMenuOpen] = useState(false);
const handleClick = () => { setMenuOpen(false); };
return(
<Menu
isOpen={ menuOpen }
onStateChange={({isOpen}) => setMenuOpen(isOpen)}
right
width={ '254px' }
customBurgerIcon={ <img src={ burger } /> }
customCrossIcon={ <img src={ close } /> }
styles={ styles }
>
{ MenuItems.map(( item ) => item ) }
</Menu>
);
}
问题是，因为汉堡菜单中的菜单项上没有onClick事件处理程序，所以当单击其中一个菜单项时，它永远不会关闭。由于这是一个jsx项的数组，我无法使用map函数直接修改这些项。
有没有一种方法可以使用我的数组，并以某种方式将点击事件处理程序注入到每个项目中(而不将其转换为字符串(？将它变成自己的组件将不允许我用li标签包装每个项目以用于桌面显示。
我有目的地避免使用对象数组，但这似乎是解决我问题的最佳方法？
我主要是想知道是否有我没有想过的方法来解决这个问题。如有任何见解或建议，我们将不胜感激。
我建议采取稍微不同的方法。将有关菜单项的数据放入数组中，只有在实际映射到组件时才能创建组件。这也会给你一些额外的灵活性。
function Navigation() {
const MenuItems = [
{
to: "/",
title: "Home",
},
{
to: "/page1",
title: "Page 1",
},
{
to: "/page2",
title: "Page 2",
},
{
to: "/page3",
title: "Page 3",
}
];
const isMobile = useMediaQuery({ query: '(max-width: 767px)' });
const isDesktop = useMediaQuery({ query: '(min-width: 1224px)' });
return (
<Nav role='navigation'>
{isMobile && <BurgerMenu MenuItems={MenuItems} />}
{isDesktop &&
<ul>
{MenuItems.map((item, index) => <li key={index}><Link to={item.to}>{item.title}</Link></li>)}
</ul>
}
</Nav>
);
}
这使您可以灵活地在BurgerMenu组件中为您的物品添加额外道具：
function BurgerMenu({ MenuItems }) {
const [menuOpen, setMenuOpen] = useState(false);
const handleClick = () => { setMenuOpen(false); };
return (
<Menu
isOpen={menuOpen}
onStateChange={({ isOpen }) => setMenuOpen(isOpen)}
right
width={'254px'}
customBurgerIcon={<img src={burger} />}
customCrossIcon={<img src={close} />}
styles={styles}
>
{MenuItems.map((item) => <Link to={item.to} onClick={handleClick}>{item.title}</Link>)}
</Menu>
);
}
我在你的问题中注意到了这一点
我有目的地试图避免为这个使用对象数组
但我不确定我是否理解其背后的原因。我认为这是最好的方法，而且可能在大多数情况下都会说这是最佳方法。
您是否尝试过用div包装项目并向其中添加onClick？
{ MenuItems.map(( item ) => <div onClick={handleClick}>{item}</div> ) }