Reactjs Jsx 条件和 useState 逻辑

Question

我正在尝试执行以下操作 我有一个下拉菜单，我在其中创建了一次只有一个菜单项处于活动状态的状态，我还将使用它来制作活动页面效果 然后我需要对我的 jsx 做这个检查 我在我所有的州移动到我的菜单 我需要检查以下内容：

const { name, link, dropdownItems } = tag;

如果我的名字存在于我的visibleMenu 数组中 如果它是真的，我还需要检查我的dropdownItems 是否是真的，因为那里是呈现我的下拉菜单，基本上我对如何在 jsx 中进行这些检查有点困惑

代码：

const MenuBar = props => {
  const MenuTags = [
    {
      name: 'home',
      link: '/',
      dropdownItems: {
        names: ['one', 'two', 'three'],
        link: ['/aa', '/b'],
      },
    },
    {
      name: 'about',
      link: '../abovisibleMenuut',
      dropdownItems: {
        names: ['one', 'two', 'three'],
        link: ['/aa', '/b'],
      },
    },
    { name: 'not dropdown', link: '../dashboard' },
    { name: 'not dropdown', link: '../dashboard/about' },
  ];
  const [visibleMenu, setVisibleMenu] = useState(
      MenuTags.reduce((r, e) => ((r[e.name] = false), r), {}),
    ),
    onUpdateVisibility = item => {
      const visibleMenuCopy = { ...visibleMenu };
      Object.keys(visibleMenuCopy).forEach(
        key => (visibleMenuCopy[key] = key === item),
      );
      setVisibleMenu(visibleMenuCopy);
    };
  console.log(visibleMenu);
  return (
      <>
      {MenuTags.map(item => (
        <MenuItem
          tag={item}
          visibleMenu={visibleMenu}
          onClick={() => onUpdateVisibility(item)}
        />
      ))}
      </>
  );
};

这是我的菜单项：（这里我需要 jsx 条件）

const MenuItem = ({ tag, visibleMenu }) => {
  const { name, link, dropdownItems } = tag;
  console.log(visibleMenu);
  return (
    <NavLi>
      <Link to={link}>{name}</Link>
    </NavLi>
  );
};

我不知道这是否是正确的逻辑，但这是我设法一次只使数组的一个状态为真的唯一方法 呈现我的下拉菜单或将 CSS 应用到我的活动项目

Answer 1

嘿，我回答了你另一个问题，不知道你只想要一个可见菜单，但是，我将使用我昨天的代码，我仍然认为你应该改变管理你的 visibleMenu 的方式。 您可以在 MenuBar 上设置它，而不是在 MenuItem 类中设置可见

const MenuBar = props => {
  const menuTags = [
    { name: 'home', link: '/', dropdownItems: ['one', 'two', 'three'] },
    // ... other menu tags you had.
  ]

  const [visibleIndex, setVisibleIndex] = useState(null)

  const = handleClick = index => {
    if (visibleIndex === index) return setVisibleIndex(null)

    return setVisibleIndex(index)
  }

  return (
    <NavUl isOpen={props.isOpen}>
      {menuTags.map((menuTag, index) => {
        return (
          <MenuTag
            tag={menuTag}
            visibility={index === visibleIndex}
            onClick={() => handleClick(index)}
          />
        )
      })}
      <li>
        <FontAwesomeIcon
          // Move the logic to only be in the Parent, this component shouldn't have to
          // pass it's parents variables.
          onClick={props.toggleOpen}
          // ... the rest of what you had
        />
      </li>
    </NavUl >
  )
}

// Handle visibility through props instead!
const MenuItem = ({ tag, visibility }) => {
  const { name, link, dropdownItems } = tag;

  return (
    <NavLi >
      <Link to={link}>{name}</Link>
      // If these are true dropdown items will appear.
      {visibility && dropdownItem && (
        {dropdownItems.map(item => (
          <ul>
            <li>
              <a>{item}</a>
            </li>
          </ul>
        ))}
      )}
    </NavLi>
  );
};

希望对您有所帮助并祝您编码愉快 :)