javascript - REACT：有条件地渲染 JSX

Question

在构建具有侧边栏的网站时，我遇到了这个问题。我正在尝试实现侧边栏仅在单击子菜单项而不是单击父元素时关闭的行为。这是它的外观截图。如您所见，我不想在单击概览、州财政和预算时关闭侧边栏。

为了实现这种行为，我试图在 sidebar.js 文件中有条件地呈现 JSX，如下面的代码片段所示。buttonhook 是一个附加了 onClick 事件的组件。

{ SidebarData.map((item, index) => {
      return <span item = {item}
                    key = {index}> 
                  {item.subNav &&
                  item.subNav.map(subItem => {
              return subItem.cName ? true : false
                                            })
           ? < ButtonHook >
                  < SubMenu item = {item}
                            key = {index} />
              </ButtonHook>   
           :  < SubMenu
            item = {item}
            key = {index} />
                  }                    
         </span>
      })
  }

上面代码的问题在于它也在 ButtonHook 组件中包装了 state 元素的财务。这是可以理解的，因为该元素的 item.Subnav 返回 true。有什么办法可以避免这种情况并获得预期的结果？

SidebarData.js 有以下内容。

export const SidebarData = [
  {
    title: 'Overview',
    path: '/overview',
    id: 1,
    // icon: <AiIcons.AiFillHome />,
    iconClosed: <RiIcons.RiArrowDownSFill />,
    iconOpened: <RiIcons.RiArrowUpSFill />,
  },
  {
    title: 'Finances of the state',
    path: '/finances',
    id: 1,
    iconClosed: <FaIcons.FaPlusSquare size="12px"/>,
    iconOpened: <FaIcons.FaRegMinusSquare size="12px" />,
    subNav: [
      {
        title: 'Introduction',
        path: '/finances/introduction',
        id: 2,
        icon: <FaIcons.FaAngleRight />,
        cName: 'sub-nav'
      },
      {
        title: 'Major Sources',
        path: '/finances/sources',
        id: 2,
        icon: <FaIcons.FaAngleRight />,
        cName: 'sub-nav'
      },
      {
        title: 'Sources and Application of funds',
        path: '/finances/application',
        id: 2,
        icon: <FaIcons.FaAngleRight />,
        cName: 'sub-nav'
      }
    ]
  },
  {
    title: 'Budget',
    id: 1,
    path: '/budget',
    icon: <IoIcons.IoIosPaper />
  }
];

submenu.js 文件具有以下内容

const SubMenu = ({ item }) => {

  const [subnav, setSubnav] = useState(false);
  const showSubnav = () => {
    return (
      setSubnav(!subnav))
  };

  return (
    <>
      <SidebarLink to={item.path} onClick={item.subNav && showSubnav}>
        <div>
          {item.icon}
          <SidebarLabel>{item.title}</SidebarLabel>
        </div>
        <div>
          {item.subNav && subnav
            ? item.iconOpened
            : item.subNav
            ? item.iconClosed
            : null}
        </div>
      </SidebarLink>
      {subnav &&
        item.subNav.map((item, index) => {
          return (
            <DropdownLink to={item.path} key={index}>
                {item.icon}
                <SidebarLabel>{item.title}</SidebarLabel>
            </DropdownLink>
          );
        })}
    </>
  );
};

如果您需要任何其他信息，请告诉我。

标签： javascriptarraysreactjsobject