当另一个菜单被打开时，如何自动关闭另一个菜单？

Question

我在想要自动折叠菜单的地方工作，当另一个opens.Now时，我已经尝试创建单独的useState并传递值，但它不起作用，我正在与您共享前后的代码。

在Dashboard.jsx中，我正在映射菜单并将其作为道具传递给MenuCards.jsx，现在如果单击一个菜单就可以扩展，那么它将再次传递给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

提升状态。

如果项的状态取决于它旁边菜单项的状态，则可以从“菜单”容器重构两者以依赖状态。类似于"openedItem“状态。

您可以在React中找到详细的说明：https://reactjs.org/docs/lifting-state-up.html，并举例说明。