Question

我最近尝试过像这样实现一个navlink：

import React from 'react';
import { Link, NavLink } from 'react-router-dom';

import '../css/navbar.css';
import logoWhite from '../../common/images';

const Navbar = props => {
    return (
        <div id="navbar" className="grid">
            <Link to="/" className="column logo-container">
                <img src={logoWhite} alt="Test logo" />
            </Link>

            <ul className="column navigation">
                <li>
                    <NavLink to="/" exact className="nav-link" activeClassName="active">Home</NavLink>
                </li>

                <li>
                    <NavLink to="/match" className="nav-link" activeClassName="active">Partner Proposals</NavLink>
                </li>
            </ul>
        </div>
    );
};

export default Navbar;

运行后，我遇到路径更改时未将类名传递给navlink的问题。阅读文章，这让我怀疑shouldComponentUpdate方法正在呈现false。所以，我重写Navbar就像这样：

import React from 'react';
import { Link, NavLink } from 'react-router-dom';

import '../css/navbar.css';
import logoWhite from '../../common/images';

class Navbar extends React.Component {
    shouldComponentUpdate() {
        console.log('Console log activated');
        return true;
    }

    render() {
        return (
            <div id="navbar" className="grid">
                <Link to="/" className="column logo-container">
                    <img src={logoWhite} alt="Test image" />
                </Link>

                <ul className="column navigation">
                    <li>
                        <NavLink to="/" exact activeClassName="active" className="nav-link">Home</NavLink>
                    </li>

                    <li>
                        <NavLink to="/match" activeClassName="active" className="nav-link">Partner Proposals</NavLink>
                    </li>
                </ul>
            </div>
        );
    }
}

export default Navbar;

奇怪的是componentDidUpdate在控制台中返回了值（表明它返回true），但是NavLink仍未传递activeClassName

有人可以建议解决这个问题吗？

Answer 1

根据@mindaJalaj的建议，我传递了一个pathname道具（每当从父组件更新路线时渲染并重新渲染），我按如下方式实现了Navbar < / p>

import React from 'react';
import PropTypes from 'prop-types';
import { Link, NavLink } from 'react-router-dom';
import { Icon } from 'semantic-ui-react';

import '../css/navbar.css';
import logo from '../../common/images/logo.png';
import navLinks from '../navLinks';

const Navbar = props => {
    function renderNavLinks() {
        return navLinks.map((navLink, index) => {
            const key: string = `nav-link-${navLink.path}-${index}`;
            const exact: boolean = navLink.exact || false;

            return (
                <li key={key}>
                    <NavLink
                        to={navLink.path}
                        exact={exact}
                        className="nav-link"
                        isActive={() => navLink.path === props.pathname}
                        activeClassName="active"
                    >
                        <Icon name={navLink.icon} />
                        <span>{navLink.title}</span>
                    </NavLink>
                </li>
            );
        });
    }

    return (
        <div id="navbar" className="grid">
            <Link to="/" className="column logo-container">
                <img src={logo} alt="Test logo" />
            </Link>

            <ul className="column navigation">{renderNavLinks()}</ul>
        </div>
    );
};

Navbar.propTypes = {
    pathname: PropTypes.string
};

Navbar.defaultProps = {
    pathname: '/'
};

export default Navbar;

shouldComponentUpdate（）返回true但NavLink仍然无法正常工作

1 个答案: