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

【问题标题】：How to make current page side draw bar tab highlighted in React.js如何在 React.js 中突出显示当前页面侧绘制栏选项卡
【发布时间】：2021-06-14 11:55:08
【问题描述】：

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

我需要在页面更改时突出显示标签...

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

这是我的代码：

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 进行样式设置

【问题讨论】：

标签： html css reactjs styled-components

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案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 框架遵循此方法

【讨论】：