reactjs – React Router v4在parent上设置activeClass

发布时间：2020-12-15 20:49:28 所属栏目：百科来源：网络整理

导读：不太熟悉react路由器,但我需要NavLink的功能来设置父li元素的活动类,而不是a元素. 为了实现这一点,我只看了NavLink的源代码并将其复制到一个新元素. (使用打字稿的示例,但与js大致相同) import * as React from 'react';import { Link,withRouter,Route } fr

不太熟悉react路由器,但我需要NavLink的功能来设置父li元素的活动类,而不是a元素.

为了实现这一点,我只看了NavLink的源代码并将其复制到一个新元素. (使用打字稿的示例,但与js大致相同)

import * as React from 'react';
import { Link,withRouter,Route } from 'react-router-dom';


class LiNavLink extends React.Component<any,{}> {
    render() {
        const {to,exact,strict,activeClassName,className,activeStyle,style,isActive: getIsActive,...rest } = this.props;
        return (
            <Route
                path={typeof to === 'object' ? to.pathname : to}
                exact={exact}
                strict={strict}
                children={({ location,match }) => {
                    const isActive = !!(getIsActive ? getIsActive(match,location) : match)

                    return (
                        <li 
                            className={isActive ? [activeClassName,className].join(' ') : className}
                            style={isActive ? { ...style,...activeStyle } : style}>
                            <Link
                                to={to}
                                {...rest}
                            />
                        </li>
                    )
                }}
            />
        );
    }
}

export default LiNavLink;

然后用法：

<ul>
   <LiNavLink activeClassName='active' exact={true} strict to="/example"><span>Active</span></LiNavLink>
   <LiNavLink activeClassName='active' exact={true} strict to="/example/archived"><span>Archived</span></LiNavLink>
</ul>

我正在使用HashRouter,由于某些我无法弄清楚的原因,当路由发生变化时,这不会更新,只有当我“刷新”页面时才更新它应该如何更新.

我相信它永远不会更新,因为道具永远不会改变？所以它不知道更新自己？

我该如何更新？或者我的问题在别的地方？

我刚刚开始做出反应,所以不确定这是不是最好的做法,但在通过路由器v4文档后,我使用了路由器道具 – > location.pathname并将其与我的路线进行比较.

这是Navigation.js：

import React from 'react';
import { withRouter } from 'react-router-dom';
import NavLink from '../General/NavLink';

const activeClass = (path,link) => {
    if (path === link) {
        return true;
    }
    return false;
};

const Navigation = props => {
    const { location } = props;
    return (
        <ul className="menu menu--main nano-content">
            <NavLink
                to="/"
                parentClass={
                    activeClass(location.pathname,'/')
                        ? 'menu__item menu__item--active'
                        : 'menu__item'
                }
                linkClass="menu__link effect effect--waves"
            >
                Dashboard
            </NavLink>
            <NavLink
                to="/users"
                parentClass={
                    activeClass(location.pathname,'/users')
                        ? 'menu__item menu__item--active'
                        : 'menu__item'
                }
                linkClass="menu__link effect effect--waves"
            >
                Users
            </NavLink>
            <NavLink
                to="/projects"
                parentClass={
                    activeClass(location.pathname,'/projects')
                        ? 'menu__item menu__item--active'
                        : 'menu__item'
                }
                linkClass="menu__link effect effect--waves"
            >
                Projects
            </NavLink>
            <NavLink
                href="http://google.com"
                parentClass="menu__item"
                linkClass="menu__link effect effect--waves"
            >
                Google
            </NavLink>
        </ul>
    );
};

export default withRouter(Navigation);

从那里你可以在子组件上使用父类和子类.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!