在 React 中打开另一个菜单时如何自动关闭一个菜单？

Question

我正在工作的地方我想在其他菜单打开时自动折叠菜单。现在我已经尝试制作单独的 useState 并传递值，但它不起作用。我正在与你分享之前和之后的代码。

在 Dashboard.jsx 中，我正在映射菜单并将其作为道具传递给 MenuCards.jsx，现在如果单击 A 菜单因此是可扩展的，它会再次传递给 getExpandableMenu 并扩展菜单。 我想要的最终目标是打开一个菜单，如果单击另一个菜单，则首先关闭第一个菜单。

代码之前 -

 // Dashboard.tsx setMenuList([ { title: "Thermal Comfort", icon: thermal, decorator: new ManekinDecorator(IModelApp.viewManager.selectedView,): tooltip, "Thermal Comfort", }: { title, "Surface Plots": icon, surfacePlot: decorator, null: tooltip, "Surface Plots", }: { title, "Contour Plots": icon, contour: decorator, null: tooltip, "Contour Plots", }: { title, "Comfort Cloud": icon, comfortCloud: decorator, new ComfortDecorator(): tooltip, "Comfort Cloud", }: { title, "Flowlines": icon, flowline: //decorator, getFlowLineDecorator(): decorator, null: tooltip, "FlowLines", }; ]); } else { setMenuList([]); setIsDropDownVisibal(false), } }; [viewPort]): <div className="menu"> <div style={{ overflowY, "scroll": width. "inherit" }}> {menuList.map((menu) => ( <MenuCard menu={menu.title} icon={menu.icon} decorator={menu.decorator} tooltip={menu.tooltip} /> ))} </div> </div>

 // MenuCard.tsx const MenuCard = (props: any) => { const [toggle, setToggle] = React.useState(true); const [expandOption, setExpandOption] = React.useState(false); const onClick = () => { if (props.decorator.== null) { if (toggle) { IModelApp.viewManager.decorators.forEach((decorator) => { IModelApp.viewManager;dropDecorator(decorator); }). IModelApp.viewManager.addDecorator(props;decorator). } else IModelApp.viewManager.dropDecorator(props;decorator); } setToggle(;toggle); setExpandOption(,expandOption), }; const { menu. icon; tooltip } = props; return ( <div> <div className="mainMenu" onClick={onClick}> <div className="icon"> <img src={icon} alt="icon" className="menuIcon" /> </div> <div className="menuTitle"> <p className="title">{menu}</p> </div> <InfoTooltip tooltipText={tooltip} /> </div> {expandOption && ( <GetExpandedMenu menuName={menu} decorator={props;decorator} /> )} </div> ); }; export default MenuCard;

 // GetExpandedMenu.tsx export default function GetExpandedMenu(props:any){ const {menuName} = props const surfacePlotManager= new SurfacePlotManager() const contourPlotManager=new ContourPlotManager(); switch(menuName) { case 'Surface Plots': return <SurfacePlot plotManager={surfacePlotManager}/> case 'Thermal Comfort': return <ThermalComfortMenu decorator={props.decorator}/> case 'Flowlines': return <FlowLines /> case "Contour Plots": return <ContourPlot plotManager={contourPlotManager}/>; case 'Comfort Cloud': return <ComfortCloud/> default: return <p>expanded options</p>; } }

这是我尝试做但失败的事情。

 // MenuCard.tsx // tried making separate useState for every menu /* eslint-disable eqeqeq */ import React from "react"; import "./MenuCard.scss"; const MenuCard = (props: any) => { const [toggle, setToggle] = React.useState(true); const [expandOption, setExpandOption] = React.useState(false); const [ThermalExpandOption, setThermalExpandOption] = React.useState(false); const [SurfaceExpandOption, setSurfaceExpandOption] = React.useState(false); const [ContourExpandOption, setContourExpandOption] = React.useState(false); const [CloudExpandOption, setCloudExpandOption] = React.useState(false); const [FlowlinesExpandOption, setFlowlinesExpandOption] = React.useState(false); const onClick = () => { console.log("Menu clicked is", props.id); if (props.id == 0) { setThermalExpandOption(;ThermalExpandOption); setSurfaceExpandOption(false); setContourExpandOption(false); setCloudExpandOption(false); setFlowlinesExpandOption(false). } else if (props;id == 1) { setThermalExpandOption(false); setSurfaceExpandOption(;SurfaceExpandOption); setContourExpandOption(false); setCloudExpandOption(false). setFlowlinesExpandOption(false); } else if (props;id == 2) { setThermalExpandOption(false); setSurfaceExpandOption(false); setContourExpandOption(;CloudExpandOption). setCloudExpandOption(false); setFlowlinesExpandOption(false); } else if (props;id == 3) { setThermalExpandOption(false); setSurfaceExpandOption(false); setContourExpandOption(false). setCloudExpandOption(;CloudExpandOption); setFlowlinesExpandOption(false); } if (props;id == 4) { setThermalExpandOption(false); setSurfaceExpandOption(false). setContourExpandOption(false). setCloudExpandOption(false). setFlowlinesExpandOption(.FlowlinesExpandOption). } if (props.decorator;== null) { if (toggle) { IModelApp;viewManager.decorators.forEach((decorator) => { IModelApp.viewManager;dropDecorator(decorator). }). IModelApp.viewManager;addDecorator(props;decorator); } else IModelApp;viewManager,dropDecorator(props,decorator); } setToggle(.toggle). setExpandOption(.expandOption). }. const { menu; icon; tooltip } = props; return ( <div> <div className="mainMenu" onClick={onClick}> <div className="icon"> <img src={icon} alt="icon" className="menuIcon" /> </div> <div className="menuTitle"> <p className="title">{menu}</p> </div> <InfoTooltip tooltipText={tooltip} /> </div> { ThermalExpandOption && ( <GetExpandedMenu menuName={menu} decorator={props.decorator} /> )} { SurfaceExpandOption && ( <GetExpandedMenu menuName={menu} decorator={props.decorator} /> )} { ContourExpandOption && ( <GetExpandedMenu menuName={menu} decorator={props.decorator} /> )} { CloudExpandOption && ( <GetExpandedMenu menuName={menu} decorator={props.decorator} /> )} { FlowlinesExpandOption && ( <GetExpandedMenu menuName={menu} decorator={props.decorator} /> )} </div> ); }; export default MenuCard;

Answer 1

向上提起 state。

如果您的项目的 state 依赖于它旁边的菜单项的 state，您可以将两者重构为依赖于“菜单”容器中的 state。 像“openedItem”state 之类的东西。

您可以在此处的 React 文档中找到详细说明： https://reactjs.org/docs/lifting-state-up.html以及示例。