reactjs - isactive 和 activeclassname 同时在 navlink
问题描述
我尝试构建一个反应路由器组件,该组件在组件处于活动状态时更新 redux 状态,但我还想为每个 NavLink 设置另一个活动类名称。不幸的是 isActive 与 activeClassName 发生冲突,当我尝试同时使用它时,只有 isActive 道具有效。有没有办法同时使用它们?
class NavBar extends Component{
render(){
const {color} = this.props
const someFunc = () =>{
someFunction(xdxd)
}
const otherFunc = () =>{
someFunction(abcd)
}
return (
<nav id="menu" className=" d-flex flex-column position-fixed">
<ul id="Nav"className="mb-0 d-flex flex-column list-group">
<NavLink style={{color}} isActive={someFunc} activeClassName="my-bg-gray" className="menu-li mt-auto mr-0 mb-0 ml-auto rounded-circle" id="about_button" exact to="/"
>a</NavLink>
<NavLink style={{color}} isActive={someFunc} activeClassName="my-bg-gray" className="menu-li mt-auto mr-0 mb-0 ml-auto rounded-circle" id="projects_button" to="/projects"
>b</NavLink>
<NavLink style={{color}} isActive={someFunc} activeClassName="my-bg-green"className="menu-li mt-auto mr-0 mb-0 ml-auto rounded-circle" id="abilities_button" to="/abilities"
>c</NavLink>
<NavLink style={{color}} isActive={otherFunc} activeClassName="my-bg-green"className="menu-li mt-auto mr-0 mb-0 ml-auto rounded-circle" id="education_button" to="/education"
>d</NavLink>
<NavLink style={{color}} isActive={otherFunc} activeClassName="bg-white" className="menu-li mt-auto mr-0 mb-0 ml-auto rounded-circle" id="sendmessage_button" to="/sendmessage"
>e</NavLink>
<NavLink style={{color}} isActive={otherFunc} activeClassName="my-bg-green" className="menu-li mt-auto mr-0 mb-0 ml-auto rounded-circle" id="socials_button" to="/socials"
>f</NavLink>
</ul>
</nav>
);}}
const mapStateToProps = (state) => {
return { color: state.color };
};
export default connect(mapStateToProps,{})(NavBar);
解决方案
推荐阅读
- angular - 使用 npm 库时的错误
- mongodb - 将 MongoDB 和 NodeJS 应用程序从 ec2 T2 迁移到另一种实例类型
- python - Python按索引连接数据框
- reactjs - 防止由于搜索栏上的去抖动而导致延迟
- r - 如何在 R 中读取多个 txt 文件并删除重复项
- r - Metafor 森林图显示优势比的置信区间不正确
- c# - 请帮助我将列表框项目转换为 C# 中的字符串数组列表
- kotlin - 为什么 Kotlin 不能推断此示例中的类型?
- python-3.x - Pandas中2个文件的区别
- java - 仅当输入 xml 没有命名空间时,Java 中的 XSLT 转换才有效