在页面加载时React中添加活动类不起作用

时间:2018-02-15 09:41:26

标签: reactjs hyperlink state router

以下是我的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但是活动类在页面加载时没有突出显示。

请帮忙

点击链接突出显示工作正常。

编辑:

下面是非常奇怪的。

enter image description here

enter image description here

0 个答案:

没有答案