以下是我的NavPanel
的代码,其中包含以下navList:
const navBarPreferences = [
{
title: 'My Account',
isRedirect: false,
isExternalLink: false,
url: '/account/dashboard',
},
{
title: 'My Orders',
isRedirect: true,
isExternalLink: false,
url: '/orders',
},
{
title: 'My Rewards',
isRedirect: true,
isExternalLink: false,
url: '/rewards',
},
{
title: 'My Lists',
isRedirect: true,
isExternalLink: false,
url: '/mylist',
},
];
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import classNames from 'classnames/bind';
import { get, includes } from 'lodash';
import { Link } from 'react-router';
import * as styles from '../CAMNavPanel.css';
const cx = classNames.bind(styles);
class CAMNavPanelListItem extends Component {
static propTypes = {
navData: PropTypes.shape({
title: PropTypes.string,
isRedirect: PropTypes.bool,
url: PropTypes.string,
}).isRequired,
location: PropTypes.shape({ pathname: PropTypes.string.isRequired,
query: PropTypes.objectOf(PropTypes.object).isRequired,
basename: PropTypes.string.isRequired,
search: PropTypes.string.isRequired,
}).isRequired,
};
static defaultProps = {
location: {
query: {},
pathname: '',
basename: '',
},
}
constructor() {
super();
this.getClasses.bind(this);
}
// give correct tab the 'active' class
getClasses(navData) {
const { location } = this.props;
const activeClass = 'active';
let isContainedInOtherUrls = false;
if (get(navData, 'otherUrls') && includes(navData.otherUrls, location.pathname)) {
isContainedInOtherUrls = true;
}
if ((location.pathname === navData.url) || isContainedInOtherUrls) {
return activeClass;
}
return '';
}
getActiveClass(e, navData) {
const elements = document.querySelectorAll('.CAMNavPanel-rewardsMenu li');
for (let i = 0; i < elements.length; i += 1) {
elements[i].className = '';
}
if (get(navData, 'scrollIntoView')) {
document.getElementsByClassName(navData.scrollIntoView)[0].scrollIntoView();
}
}
render() {
const { navData } = this.props;
let activeClass = '';
let target = '';
if (navData.isExternalLink) {
target = '_blank';
}
activeClass = this.getClasses(navData);
return (
<li className={cx(activeClass)} key={navData.title}>
{ navData.isRedirect ? <a href={navData.url} target={target}>
{navData.title}</a> :
<Link to={navData.url} onClick={e => this.getActiveClass(e, navData)}>{navData.title}</Link> }
</li>
);
}
}
export default CAMNavPanelListItem;
我的location.pathname是/account/dashboard
但是活动类在页面加载时没有突出显示。
请帮忙
点击链接突出显示工作正常。
编辑:
下面是非常奇怪的。