鍍金池/ 問(wèn)答/HTML5  HTML/ 怎么在react的jsx中使用activeClassName改變上層或者其他標(biāo)簽

怎么在react的jsx中使用activeClassName改變上層或者其他標(biāo)簽的class呢？

clipboard.png
1里的li標(biāo)簽class使用active可以正常顯示樣式但是把li標(biāo)簽替換成NavLink無(wú)效，
直接在NavLink里設(shè)置樣式（圖中2的形式）只能改變a標(biāo)簽（轉(zhuǎn)換成html后的a標(biāo)簽）的class而不是li標(biāo)簽，所以效果也不能實(shí)現(xiàn)。

我想根據(jù)路由比如to=“/”這個(gè)地址來(lái)讓li標(biāo)簽里的className變成active。怎么才能做到呢？css里實(shí)在有些復(fù)雜，直接去改css不知道怎么改，有沒(méi)有react里可以實(shí)現(xiàn)的方法，或者能做到的思路？
非常感謝大佬們。

回答
編輯回答
夏夕

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

在jsx中使用三元表達(dá)式可以完成這個(gè)功能。
首先得在當(dāng)前組件中注入router信息，否則location是沒(méi)有的。

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

export default withRouter(你的組件)
2018年4月6日 14:28
編輯回答
凹凸曼
className={{active: this.props.history.location.href === '/'}}
2017年7月9日 10:56