Question

渲染子菜单时出现问题。如果页面具有多个链接，则页面刷新后不会一次全部呈现。单击“见解”或“管理”后，您可以看到此gif screen capture =>，呈现第一个子菜单链接，然后呈现一些延迟。带菜单的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))

Answer 1

好吧，这不是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;
}

React组件不能一次全部渲染

1 个答案: