以下 React.js 代码呈现一个导航栏,其中包含两个名为“about”和“project”的链接。页面加载时,“关于”链接处于活动状态并呈红色。单击另一个链接时,导航栏的状态将设置为“项目”,“关于”链接样式将被设置回来,并且“项目”将显示为红色。
我通过将单击处理程序附加到两个链接标记来实现此目的,并将活动状态设置为 event.target.innerHTML 的名称。
我是个新手,我觉得这是一种非常冗长的处理方式。我知道有一个 activeClassName 属性可以传递给react-router链接,但我想要一种不使用它的方法。
import React, { Component } from 'react'
import { Link, Route } from 'react-router'
export default class Navbar extends Component {
constructor() {
super();
this.state = {
active: 'about'
}
this._handleClick = this._handleClick.bind(this);
}
_handleClick(e) {
this.setState({
active: e.target.innerHTML
});
}
render() {
let aboutStyle;
let projectStyle;
if (this.state.active === 'about') {
aboutStyle = { color: '#ff3333' };
projectStyle = {};
} else {
aboutStyle = {};
projectStyle = { color: '#ff3333' };
}
return (
<div className='navbar'>
<Link to='/'><h2>BK //</h2></Link>
<div className='menu'>
<Link style={aboutStyle} onClick={this._handleClick} to='about'>about</Link>
<Link style={projectStyle} onClick={this._handleClick} to='projects'>projects</Link>
</div>
</div>
)
}
}
今天,您可以使用 NavLink 从react-router-dom
。该对象支持的属性如下activeClassName
, activeStyle
, or isActive
(对于函数)。
import { NavLink } from 'react-router-dom';
<NavLink to='about' activeClassName="active">about</NavLink>
// Or specifing active style
<NavLink to='about' activeStyle={{color: "red"}}>about</NavLink>
// If you use deep routes and you need an exact match
<NavLink exact to='about/subpath' activeClassName="active">about</NavLink>
有关更多选项,请阅读文档:https://reacttraining.com/react-router/web/api/NavLink https://reacttraining.com/react-router/web/api/NavLink
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)