Question

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

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

react-loadable正在创建一个似乎包含寄存器组件的附加文件（0.js），但我的搜索未发现任何有关登录的引用。

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

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

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

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

标头组件的摘录：

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>;
}

}

Answer 1

我的错误是我在子组件上进行了状态更改。因此，我将其分解，更改了标头组件的呈现方法，如下所示：

   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>       
    );

react-loadable组件不等待触发器加载

1 个答案: