Как получить доступ к родительским меню, когда подменю открыты в React с Material-UI? ⇐ CSS

[Anonymous]

Я реализовал компонент динамического меню в React, используя Material-UI (@mui), который позволяет создавать вложенные меню и подменю. Поведение, которого я пытаюсь достичь, заключается в том, чтобы иметь доступ к другим меню (например, родительским меню), пока открыто подменю.
У меня есть настройка, при которой нажатие на пункт меню может либо отобразить подменю или переключить состояние флажка. Однако, когда подменю открыто, я хочу иметь возможность вернуться к родительскому меню или получить доступ к другим меню верхнего уровня, не закрывая открытое в данный момент подменю.
Вот упрощенная версия моего кода:

Код: Выделить всё

import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import IconButton from '@mui/material/IconButton';
import MenuIcon from '@mui/icons-material/Menu';
import Checkbox from '@mui/material/Checkbox';

const RecursiveMenu = ({ menuItems }) => {
const [anchorEl, setAnchorEl] = useState(null);

const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};

const handleClose = () => {
setAnchorEl(null);
};

return (





{Object.values(menuItems)
.filter((menuItem) => menuItem.showing !== false)
.map((menuItem) => (

))}


);
};

const RecursiveMenuItem = ({ menuItem }) => {
const [subMenuAnchorEl, setSubMenuAnchorEl] = useState(null);
const [showingState, setShowingState] = useState(menuItem.showing);

const handleClick = (event) => {
if (menuItem.options) {
setSubMenuAnchorEl(event.currentTarget);
} else {
// Toggle between 0, 1, and 2 for checked, indeterminate, and unchecked
setShowingState((prevState) => (prevState + 1) % 3);
}
};

const handleClose = () => {
setSubMenuAnchorEl(null);
};

return (


{menuItem.name}
{!menuItem.options && (

)}

{menuItem.options && (

{Object.values(menuItem.options)
.filter((subMenuItem) => subMenuItem.showing !== false)
.map((subMenuItem) => (

))}

)}

);
};

const App = () => {
const menuItems = {
A: { id: "A", name: "A", enabled: false, showing: 0 },
B: { id: "B", name: "B", enabled: false, showing: 2 },
C: {
id: "c",
name: "C",
options: {
C1: { id: "C1", name: "C1", enabled: false, showing: 1 },
C2: {
id: "C2", name: "C2", options:
{
C21: { id: "C21", name: "C2.1", enabled: false, showing: 0 },
C22: { id: "C22", name: "C2.2", enabled: false, showing: 2 },
}
},
},
},
Shaun: { id: "D", name: "D", enabled: false, showing: 2 },
};

return ;
};

export default App;

В этой реализации:
Нажатие на пункт меню с помощью MenuItem.options отображает подменю.
Нажатие на пункт меню без параметров переключает состояние флажка.
В частности, я хочу добиться следующего:
Разрешить пользователям переходить к другим меню, пока подменю остается открытым.
Поддерживать открытое состояние родительского меню или предыдущих меню при взаимодействии с подменю.
Что я пробовал:
Я пытался управлять состоянием, используя useState для элемента привязки подменю (subMenuAnchorEl) и состояние отображения пунктов меню (showingState).
Может ли кто-нибудь дать рекомендации о том, как добиться такого поведения?
Я открыт для предложений или примеров того, как чтобы лучше управлять навигацией по меню и состояниями в этом контексте. Спасибо!



Подробнее здесь: https://stackoverflow.com/questions/783 ... aterial-ui