Question

这里有一个侧边栏，我需要高亮选中的标签

每当页面更改时，我都需要突出显示选项卡...

我怎样才能做到这一点..？

这是我的代码：

react.js：

<Menu>
        {SideBarData.map((element, i) => {
          return (
            <NavIcon onClick={showSidebar} to={element.path} key={i}>
              {element.icon}
            </NavIcon>
          );
        })}
</Menu>

style.js

import { Link as LinkS } from "react-router-dom";

const Menu = styled.div`
  background: ${BG_COLOR.PRIMARY_COLOR_WHITE};
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 56px;
  height: 100vh;
  margin-left: -8px;
  box-shadow: 5px 0 10px -5px #888;
  position: fixed;
`;

const NavIcon = styled(LinkS)`
  font-size: ${FONT_SIZE.TEXT_NORMAL};
  display: flex;
  justify-content: flex-start;
  justify-content: center;
  align-items: center;
  height: 3rem;
  width: 100%;
  color: ${BG_COLOR.PRIMARY_COLOR_BLACK};
  text-decoration: none;
  border-bottom: 1px solid;
  border-bottom-color: ${BG_COLOR.PRIMARY_COLOR_BLACK};
  text-align: left;

  &:hover {
    background-color: ${BG_COLOR.PRIMARY_COLOR};
    border-left: 5px solid ${BG_COLOR.PRIMARY_COLOR_BLACK};
    cursor: pointer;
  }
`;

这里我使用了 styled-components 来做样式

Answer 1

如果您的侧边栏用于更改路径，您可以从 ReactRouter NavLink 尝试此功能并使用 activeClassName 设置所选标签的样式。

Answer 2

以这种方式在代码中通过 react-router-dom 使用 NavLink。

  <NavLink to={element.path}" key={i}>
        <NavIcon>
          {element.icon}
        </NavIcon>
  </NavLink>

如果您在浏览器中看到您的输出，将会有一个活动类，其中包含带有当前路径或 URL 的图标的父元素。您可以根据自己的喜好为该活动类添加样式

Answer 3

您可以使用 react-router-dom bu 检查路径并保持路径位置作为关键。

import { Link, withRouter } from "react-router-dom";

const CustomSider = withRouter((props) => {
  const { location } = props;

  return (
      <Menu selectedKeys={[location.pathname]} mode='inline' theme='light'>
        <Menu.Item key='/dashboard/home' icon={<HomeIcon />}>
          <Link to='/dashboard/home'>Home</Link>
        </Menu.Item>
        <Menu.Item key='/dashboard/staff' icon={<StaffIcon />}>
          <Link to='/dashboard/staff'>Staff</Link>
        </Menu.Item>
        <Menu.Item key='/dashboard/clients' icon={<ClientIcon />}>
          <Link to='/dashboard/clients'>Clients</Link>
        </Menu.Item>
        <Menu.Item key='/dashboard/calendar' icon={<CalendarIcon />}>
          <Link to='/dashboard/calendar'>Calendar</Link>
        </Menu.Item>
        <Menu.Item key='/dashboard/inventory' icon={<ToolIcon />}>
          <Link to='/dashboard/inventory'>Inventory</Link>
        </Menu.Item>
        <Menu.Item key='/dashboard/marketing' icon={<SpeakerIcon />}>
          <Link to='/dashboard/marketing'>Marketing</Link>
        </Menu.Item>
        <Menu.Item key='/dashboard/analytics' icon={<PieChartOutlined />}>
          <Link to='/dashboard/analytics'>Analytics</Link>
        </Menu.Item>
        <Menu.Item key='/dashboard/invoice' icon={<UnorderedListOutlined />}>
          <Link to='/dashboard/invoice'>Invoice/Billing</Link>
        </Menu.Item>
      </Menu>
  );
});

这里 react-router-dom 将检查路径并突出显示相应的导航项。

注意：我在 React Js 中使用 Ant 设计 UI 框架遵循此方法

如何在 React.js 中突出显示当前页面侧边绘制栏选项卡

3 个答案: