1

这是一个基本的标题组件，包括在点击时显示登录/注册表单的按钮。

当然，这样做的目的是在请求之前不应加载登录和注册组件。

react-loadable 正在创建一个附加文件（ 0.js ），该文件似乎包含注册组件，但我的搜索没有发现任何对登录的引用。

无论如何，在初始加载时，登录和注册都被加载，正如我的 console.log 所示。

当然，我希望在单击触发按钮之前不会加载它们。

请注意，我确实尝试在路由上使用 react-loadable，它似乎工作正常，即，我可以在开发工具的网络选项卡上看到正在加载的文件。

另外，我碰巧有一个服务人员现在正在预缓存构建文件，但我认为这不会影响这一点。还是应该？它不在路线上。

标头组件的摘录：

import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { withRouter } from 'react-router-dom';
import Loadable from 'react-loadable';

//import Register from '../register/'; ** PREVIOUS REGULAR IMPORT
//import Login from '../login/'; ** PREVIOUS REGULAR IMPORT
import { Loading } from '../../../tools/functions';


const Login = Loadable({
  loader: () => import('../login/'),
  loading: Loading,
  delay: 200,
  timeout: 5000
});

const Register = Loadable({
  loader: () => import('../register/'),
  loading: Loading,
  delay: 200,
  timeout: 10000
});

render () {
     return (
        <header>
            <div className="header_top flex">
                <div className="branding"></div>
                <div className="header_spacer"></div>
                <Status handleClick={this.handleLoginRegisterClick}/>
            </div>
            <Nav />
            <div className="auth">
                <Register 
                    active={this.state.activeRegister} 
                    handleClick={this.handleLoginRegisterClick}
                    toggleDialog={this.toggleLoginRegisterDialogs} 
                />
                <Login 
                    active={this.state.activeLogin} 
                    handleClick={this.handleLoginRegisterClick} 
                    handleClickPasswordReset={this.togglePasswordResetRequest} 
                    toggleDialog={this.toggleLoginRegisterDialogs} 
                />
                <PasswordResetRequest 
                    active={this.state.activePasswordResetRequest} 
                    hidePasswordResetRequest={this.togglePasswordResetRequest} 
                />
                <SessionHandler location={location}/>
            </div>
            {showAdForm()}
        </header>       
    );
}

加载功能：

export const Loading = ({ error }) => {
if (error) {
  return 'error';
} else {
  return <h3>Loading...</h3>;
}

}

4

1 回答 1

0

我的错误是子组件的状态发生了变化。所以，我把它分解了，改变了 header 组件的 render 方法，如下所示：

   const activeDialog = () => {
        if (this.state.activeLogin) {
            return (
                <Login 
                    active={this.state.activeLogin} 
                    handleClick={this.handleLoginRegisterClick} 
                    handleClickPasswordReset={this.togglePasswordResetRequest} 
                    toggleDialog={this.toggleLoginRegisterDialogs} 
                />
            )
        } else if (this.state.activeRegister) {
            return (
                <Register 
                    active={this.state.activeRegister} 
                    handleClick={this.handleLoginRegisterClick}
                    toggleDialog={this.toggleLoginRegisterDialogs} 
                />
            )
        } else if (this.state.activePasswordResetRequest) {
            return (
                <PasswordResetRequest 
                    active={this.state.activePasswordResetRequest} 
                    hidePasswordResetRequest={this.togglePasswordResetRequest} 
                />
            )
        }
    }

    return (
        <header>
            <div className="header_top flex">
                <div className="branding"></div>
                <div className="header_spacer"></div>
                <Status handleClick={this.handleLoginRegisterClick}/>
            </div>
            <Nav />
            <div className="auth">
                {activeDialog()}
                <SessionHandler location={location}/>
            </div>
            {showAdForm()}
        </header>       
    );
于 2018-09-27T07:33:21.883 回答