怎么在react的jsx中使用activeClassName改变上层或者其他标签的class呢?

clipboard.png
1里的li标签class使用active可以正常显示样式但是把li标签替换成NavLink无效,
直接在NavLink里设置样式(图中2的形式)只能改变a标签(转换成html后的a标签)的class而不是li标签,所以效果也不能实现。

我想根据路由比如to=“/”这个地址来让li标签里的className变成active。怎么才能做到呢?css里实在有些复杂,直接去改css不知道怎么改,有没有react里可以实现的方法,或者能做到的思路?
非常感谢大佬们。

阅读 2.8k
2 个回答
className={{active: this.props.history.location.href === '/'}}

className={this.props.history.location.pathname === '/'?'active':' '}

在jsx中使用三元表达式可以完成这个功能。
首先得在当前组件中注入router信息,否则location是没有的。

import { withRouter } from 'react-router-dom'

export default withRouter(你的组件)
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题