html - 向导航项添加一个克拉，其类处于事件状态，不会将导航图标推出 div

Question

我正在创建一个 react 导航栏，如果用户正在查看某个网址/路线，我想用克拉突出显示每个导航项。我正在用 sass 写作，并且一直在尝试将 carat 添加到伪类 :after 并且我没有任何运气。 SVG 在这里使用 active 类成功突出显示。

这里最好的方法是什么？

例如，这是我的 React 导航项:

getViewNavItem() {
    const currentPath = window.location.pathname;
    const dash= "/dashboard"

    return (
      <li className={ classNames({"active": currentPath === partners}, "sidebar-item view")}>
          <div data-place="right" data-type="dark" data-effect="solid" data-multiline="false" data-class="nav-tooltip" delayHide={2000} data-tip data-for='view'>
            <UiIcon icon="view-nav-text" dimensions={[25, 25]} />
          </div>
          <ReactTooltip id='view' globalEventOff='click'>
            <ul>
            <div className="sub-links">
              <li><a className="sidebar-sublinks" href="/dashboard">Dashboards</a></li>
            </div>
            </ul>
          </ReactTooltip>
      </li>
    );
  },

萨斯:

.sidebar-item
      background-color: #242524
      margin-top: 30px
      font-size: 10px
      height: 65px
      text-align: center
      &.active
        svg
          path
            fill: white
            transition: all 0.2s ease-in-out
        &:after
          background-color: white
          border-bottom: 7px solid black !important
          border-top: 7px solid black !important
          border-right: 7px solid transparent !important

Answer 1

不使用 CSS，有条件地为 carat 渲染一个 DOM 元素:

getViewNavItem() {
    const currentPath = window.location.pathname;
    const dash= "/dashboard"

    return (
      <li className={ classNames("sidebar-item view")}>
          {
            currentPath === partners
            ?
              <div className="carat"></div> // Some kind of carat element
            :
              [] // Render nothing
          }
          <div data-place="right" data-type="dark" data-effect="solid" data-multiline="false" data-class="nav-tooltip" delayHide={2000} data-tip data-for='view'>
            <UiIcon icon="view-nav-text" dimensions={[25, 25]} />
          </div>
          <ReactTooltip id='view' globalEventOff='click'>
            <ul>
            <div className="sub-links">
              <li><a className="sidebar-sublinks" href="/dashboard">Dashboards</a></li>
            </div>
            </ul>
          </ReactTooltip>
      </li>
    );
}

我注意到的另一件事是，就目前而言，变量 partners 似乎不在 render() 的范围内。即使是这样，除非您的组件状态或 Prop 以某种方式更改，否则您的 render() 函数将不会重新运行，因此您可能不会在更新发生时看到您的应用程序。确保您的组件生命周期和 prop/state 更新是有序的。