[英]react-loadable component does not wait trigger to load
This is a basic header component that includes buttons to show login/register forms on click. 这是一个基本的标题组件,其中包括在单击时显示登录/注册表单的按钮。
The intention is, of course, that the login and register components shouldn't be loaded until requested. 当然,这样做的目的是在请求之前不加载登录和注册组件。
react-loadable is creating an additional file ( 0.js ) that seem to include the register component, but my search did not turn out any reference to login. react-loadable正在创建一个似乎包含注册组件的附加文件(0.js),但我的搜索未发现任何有关登录的引用。
In any case, upon initial load, both login and register are being loaded, as my console.log shows. 无论如何,如我的console.log所示,在初始加载时,登录名和注册都将被加载。
Of course, I was expecting that they would not be loaded until the triggering button was clicked on. 当然,我期望在单击触发按钮之前不会加载它们。
Note that I did attempt to use react-loadable on routes, and it seems to work correctly, ie, I can see the files being loaded on the network tab of the dev tools. 请注意,我确实尝试在路由上使用react-loadable,并且似乎可以正常工作,即,我可以在dev工具的“网络”选项卡上看到正在加载的文件。
Also, I happen to have a service worker precaching the build files for now, but I do not believe that should impact this. 另外,我碰巧现在有一个服务工作者预缓存构建文件,但是我认为这不会对此产生影响。 Or should it?
还是应该? It doesn't on routes.
它不在路线上。
Excerpts of the header component: 标头组件的摘录:
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>
);
}
The Loading function: 加载功能:
export const Loading = ({ error }) => {
if (error) {
return 'error';
} else {
return <h3>Loading...</h3>;
}
} }
My mistake was that I had the state change on the child component. 我的错误是我在子组件上进行了状态更改。 So, I factored it up, changing the render method of the header component as follows:
因此,我将其分解,如下更改标题组件的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>
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.