向具有活动类的导航项添加一克拉，该类不会将导航图标推出 div

Question

我正在创建一个反应导航栏，如果用户正在查看某个 URL/路由，我想用克拉突出显示每个导航项。我正在用sass写作，并且一直在尝试添加带有伪类的克拉：之后，并且没有任何运气。SVG 在此处通过活动类成功突出显示。

这里最好的方法是什么？

例如，这是我的反应导航项目：

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，而是有条件地渲染克拉的 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()范围内。即使是这样，除非你的组件状态或 props 以某种方式被更改，否则你的render()函数不会重新运行，所以你可能不会看到你的应用程序更新。确保您的组件生命周期和属性/状态更新井井有条。