javascript - 如何在反应js中单击添加活动类

Question

我已经阅读并尝试了许多解决方案，但我是 React 新手，我无法弄清楚单击 div 时如何添加类 {s.highlighted}。有人可以向我解释一下吗？这是我的代码，但不是我写的。我更喜欢在单击时将 {s.highlighted} 添加到“ListItem”，并将其从之前处于活动状态的元素中删除。

看起来以前的开发人员开始做某事，但它不能正常工作。目前只有“测试助手”链接始终突出显示。这段代码有什么问题？

const useStyles = makeStyles((theme) =>
  createStyles({
    link: {
      textDecoration: 'none',
      color: theme.palette.grey[900],
    },
    highlighted: {
      backgroundColor: lighten(green[500], 0.5),
    },
  })
)

// eslint-disable-next-line
//@ts-nocheck
export const MenuItems: React.FC = () => {
  const s = useStyles()

  return (
    <div>
      <Link to="/dashboard/proxies" className={s.link}>
        <ListItem>
          <ListItemIcon>
            <CloudDone />
          </ListItemIcon>
          <ListItemText primary="Proxies" />
        </ListItem>
      </Link>

      <Link to="/dashboard/permissions" className={s.link}>
        <ListItem>
          <ListItemIcon>
            <VerifiedUser />
          </ListItemIcon>
          <ListItemText primary="Permissions" />
        </ListItem>
      </Link>

      <Link to="/dashboard/test-helpers" className={classnames(s.link)}>
        <ListItem className={s.highlighted}>
          <ListItemIcon>
            <Help />
          </ListItemIcon>
          <ListItemText primary="Test Helpers" />
        </ListItem>
      </Link>

      <Link to="/dashboard/plans" className={s.link}>
        <ListItem>
          <ListItemIcon>
            <FormatListNumbered />
          </ListItemIcon>
          <ListItemText primary="Plans" />
        </ListItem>
      </Link>

      <Link to="/dashboard/user-management" className={s.link}>
        <ListItem>
          <ListItemIcon>
            <Person />
          </ListItemIcon>
          <ListItemText primary="User Management" />
        </ListItem>
      </Link>

      <Link to="/dashboard/activate-subscription" className={s.link}>
        <ListItem>
          <ListItemIcon>
            <PersonAdd />
          </ListItemIcon>
          <ListItemText primary="Activate Subscription" />
        </ListItem>
      </Link>

      <Link to="/dashboard/user-plan-limits" className={s.link}>
        <ListItem>
          <ListItemIcon>
            <BarChartIcon />
          </ListItemIcon>
          <ListItemText primary="User Plan Limits" />
        </ListItem>
      </Link>
    </div>
  )
}

标签： javascriptreactjs

Answer 1

您可以改用NavLinkof 组件react-router-dom，它接受一些可以让您实现主动路由行为的道具，就像您试图实现的那样。

然后你可以传递s.highlighted给activeClassNameprop 并修改 css 以定位它的第一个子元素，该子元素将以ListItem组件为目标。

这是您更新的代码：

const useStyles = makeStyles((theme) =>
  createStyles({
    link: {
      textDecoration: 'none',
      color: theme.palette.grey[900],
    },
    highlighted: {
      '& > div': {
        backgroundColor: lighten(green[500], 0.5)
      }
    },
  })
)

// eslint-disable-next-line
//@ts-nocheck
export const MenuItems: React.FC = () => {
  const s = useStyles()

  return (
    <div>
      <NavLink activeClassName={s.highlighted} to="/dashboard/proxies" className={s.link}>
        <ListItem>
          <ListItemIcon>
            <CloudDone />
          </ListItemIcon>
          <ListItemText primary="Proxies" />
        </ListItem>
      </NavLink>

      <NavLink activeClassName={s.highlighted} to="/dashboard/permissions" className={s.link}>
        <ListItem>
          <ListItemIcon>
            <VerifiedUser />
          </ListItemIcon>
          <ListItemText primary="Permissions" />
        </ListItem>
      </NavLink>

      <NavLink activeClassName={s.highlighted} to="/dashboard/test-helpers" className={classnames(s.link)}>
        <ListItem>
          <ListItemIcon>
            <Help />
          </ListItemIcon>
          <ListItemText primary="Test Helpers" />
        </ListItem>
      </NavLink>

      <NavLink activeClassName={s.highlighted} to="/dashboard/plans" className={s.link}>
        <ListItem>
          <ListItemIcon>
            <FormatListNumbered />
          </ListItemIcon>
          <ListItemText primary="Plans" />
        </ListItem>
      </NavLink>

      <NavLink activeClassName={s.highlighted} to="/dashboard/user-management" className={s.link}>
        <ListItem>
          <ListItemIcon>
            <Person />
          </ListItemIcon>
          <ListItemText primary="User Management" />
        </ListItem>
      </NavLink>

      <NavLink activeClassName={s.highlighted} to="/dashboard/activate-subscription" className={s.link}>
        <ListItem>
          <ListItemIcon>
            <PersonAdd />
          </ListItemIcon>
          <ListItemText primary="Activate Subscription" />
        </ListItem>
      </NavLink>

      <NavLink activeClassName={s.highlighted} to="/dashboard/user-plan-limits" className={s.link}>
        <ListItem>
          <ListItemIcon>
            <BarChartIcon />
          </ListItemIcon>
          <ListItemText primary="User Plan Limits" />
        </ListItem>
      </NavLink>
    </div>
  )
}