0

我在渲染子菜单时遇到问题。如果它有多个链接，它不会在页面刷新后一次全部呈现。您可以看到这个 gif屏幕截图=> 在单击 Insights 或 Administration 后，第一个子菜单链接被呈现，然后另一个子菜单链接有一些延迟。带有菜单的 HeaderContainer 的缩短代码如下：

import React, { Component } from 'react'
import { connect } from 'react-redux'
import PropTypes from 'prop-types'
import { NavLink, Link } from 'react-router-dom'
import { withRouter } from 'react-router'
import { Route, Switch } from 'react-router-dom'

const AdminSubmenu = () => {
    return (
        <nav className="secondary-nav">
            <NavLink to={ getRoutePath('administration.users') } activeClassName="is-active" data-text="Users">
                Users
            </NavLink>
            <NavLink to={ getRoutePath('administration.settings') } activeClassName="is-active" data-text="Settings">
                Settings
            </NavLink>
            <NavLink to={ getRoutePath('administration.data-landscape') } activeClassName="is-active" data-text="Data Landscape">
                Data Landscape
            </NavLink>
        </nav>
    )
}

class HeaderContainer extends Component {
    render() {
        return(
            <div className="header-container">
                <div className="primary">
                    <div className="wrapper">
                        <nav className="primary-nav">
                            <NavLink to={ getRoutePath('customers') } activeClassName="is-active">
                                Customers
                            </NavLink>
                            <NavLink to={ getRoutePath('segments') } activeClassName="is-active">
                                Segments
                            </NavLink>
                            <NavLink to={ getRoutePath('insights') } activeClassName="is-active">
                                Insights
                            </NavLink>
                            <NavLink to={ getRoutePath('administration') } activeClassName="is-active">
                                Administration
                            </NavLink>
                        </nav>
                    </div>
                </div>
                <div className="secondary">
                    <div className="wrapper">
                        <Switch>
                            <Route path={ getRoutePath('administration') } component={ AdminSubmenu } />
                            <Route exact path={ getRoutePath('segments') } component={ SegmentsListSubmenu } />
                            <Route path={ getRoutePath('segments.detail') } component={ SegmentDetailSubmenu } />
                            <Route path={ getRoutePath('insights') } component={ InsightsSubmenu } />
                            <Route exact path={ getRoutePath('customers') } component={ CustomersListSubmenu } />
                            <Route path={ getRoutePath('customers.detail') } component={ CustomerDetailSubmenu } />
                        </Switch>
                    </div>
                </div>
            </div>
        )
    }
}

export default withRouter(connect(mapStateToProps)(HeaderContainer))
4

1 回答 1

0

好的，这不是 React 问题，它是由子菜单锚（链接）标签上的这个 css 代码引起的......有趣：-/

transition: all 0.15s ease-out;

&.is-active, &:hover {
  font-weight: bold;
}

&:after {
  display: block;
  content: attr(data-text);
  font-weight: bold;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}
于 2018-06-26T20:43:30.997 回答