Question

您好，我对如何使用useState做出反应表示怀疑，基本上，我有一个需要映射的菜单，我基本上需要一个包含所有标签的状态，并使用布尔状态true或false来了解当前项目是否处于活动状态，并且我将通过单击该项目使其处于活动状态并停用点击其他项目时

即一次只激活一个菜单项

export const SideBarTags = [
  {
    name: 'Tutoriais',
    link: '../tutorials',
    icon: faFileAlt,
    dropdownItems: null,
    active: false,
  },
  {
    name: 'Avisos',
    link: '../news',
    icon: faNewspaper,
    dropdownItems: null,
    active: false,
  },
  {
    name: 'Serviços',
    link: '../services',
    icon: faMeteor,
    active: false,
    dropdownItems: [
      { name: 'Elo Boost', link: '/eloBost' },
      { name: 'Duo Boost', link: '/duoBoost' },
      { name: 'MD10', link: '/eloBost' },
      { name: 'Coaching', link: '/duoBoost' },
      { name: 'Vitóriais', link: '/duoBoost' },
    ],
  },
  {
    name: 'Carteira',
    link: '../cartcredit',
    icon: faWallet,
    active: false,
    dropdownItems: [
      { name: 'Histórico', link: '/history' },
      { name: 'Adicionar Crédito', link: '/add' },
    ],
  },
];

和我的TSX：

const MenuTags: React.FC<Hamburguer> = ({ isOpen }) => {
    const [menuTags, setMenuTags] = useState(SideBarTags.map());

  return (
    <DashMenu open={isOpen}>
    <MenuItem /> //(this is my tag <li>
    </DashMenu>
  );
};



const MenuItem: React.FC = () => {


  return (
    <ListItem>
      <ListWrap

      >
        <a>
          <FontAwesomeIcon
            className="icon-li"
            icon={icon}
            size={isOpen ? 'lg' : 'lg'}
            fixedWidth
            color="white"
          />
          <span
            className="li-name"
          >
            {name}
          </span>
        </a>
    </ListItem>
  );
};

Answer 1

我在过去的项目中所做的工作的超级简化版：

const MenuTags = () => {
  const [selectedLink, setSelectedLink] = useState(null)

  return (
    <ul>
      {SideBarTags.map((obj) => (
        <li className={`${selectedLink === obj.name ? 'link--selected' : ''}`}>
          <a
            onClick={() => {
              setSelectedLink(obj.name)
            }}
            href={obj.link}
          >
            {obj.name}
          </a>
        </li>
      ))}
    </ul>
  )
}

使用CSS打开和关闭菜单项，只需将诸如“ link--selected”之类的类添加到元素中，就可以显示该项。

Answer 2

组件逻辑，如果您想将菜单项与活动项进行映射

const [menuItems, setMenuItems] = useState(SideBarTags);

const clickHandler = name => () => {
  setMenuItems(items =>
    items.map(item => ({
      ...item,
      active: item.name === name
    }))
  );
};

...

{menuItems.map(item => (
  <li
    key={item.name}
    className={item.active ? "active" : ""}
    onClick={clickHandler(item.name)}
  >
    {item.name}
  </li>
))}

CSS

.active {
  // could be whatever style you need
  color: red;
}

ReactJs useState数组映射

2 个答案: