我已經研究并嘗試實施提供的一些解決方案，但在嘗試實作這一目標時失敗了。我能夠制作我的下拉選單并單擊，這樣每個子選單將在單擊其父級時打開和關閉。我希望在單擊不同的選單時關閉一個打開的子選單，因此我沒有將所有子選單都堆疊在選單欄中。有人能指出我如何實作這一目標嗎？感謝你們對我的幫助。
選單.js
import React from 'react'
import MenuItem from '../MenuItem';
import { SidebarData } from '../../helpers/SidebarData';
import * as C from './styles';
const Menu = () => {
return (
<C.Container>
<C.MenuArea>
{SidebarData.map((item, index) => {
return <MenuItem item={item} key={index} />;
})}
</C.MenuArea>
</C.Container>
)
};
export default Menu
選單項.js
import React, { useState } from 'react';
import { NavLink } from 'react-router-dom';
import * as C from './styles';
const MenuItem = ({ item }) => {
const [opened, setOpened] = useState(false);
const showSubnav = () => setOpened(!opened);
return (
<C.NavUnlisted>
<NavLink to={item.path} onClick={item.subNav && showSubnav} activeClassName='current' exact={item.path === '/' ? true : false} >
<C.SidebarLink>
<div>
{item.icon}
<C.SidebarLabel>{item.title}</C.SidebarLabel>
</div>
<div>
{item.subNav && opened
? item.iconOpened
: item.subNav
? item.iconClosed
: null}
</div>
</C.SidebarLink>
</NavLink>
{opened &&
item.subNav.map((item, index) => {
return (
<NavLink to={item.path} key={index} activeClassName='current' >
<C.DropdownLink>
{item.icon}
<C.SidebarLabel>{item.title}</C.SidebarLabel>
</C.DropdownLink>
</NavLink>
);
})}
</C.NavUnlisted>
);
};
export default MenuItem;
uj5u.com熱心網友回復：
當您在選單組件外部單擊時嘗試關閉選單，如果這是您感興趣的解決方案，您可以了解有關如何在 react 中實作此目的的更多資訊：
https://stackoverflow.com/a/42234988/16956436
uj5u.com熱心網友回復：
處理此問題的一種優雅方法是跟蹤Menu組件中當前打開的子選單，并根據從父組件傳遞的道具來顯示/隱藏子選單。
import React from 'react'
import MenuItem from '../MenuItem';
import { SidebarData } from '../../helpers/SidebarData';
import * as C from './styles';
const Menu = () => {
const [currentlyOpen, setCurrentlyOpen] = useState(null);
return (
<C.Container>
<C.MenuArea>
{SidebarData.map((item, index) => {
return <MenuItem item={item} key={index} isOpen={index === currentlyOpen} handleClick={(i) => setCurrentlyOpen(i)} />;
})}
</C.MenuArea>
</C.Container>
)
};
export default Menu
然后handleClick，您將使用 中的相應索引進行呼叫MenuItem.js。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/349424.html
標籤：javascript 反应