策略模式种的两种加载器已经分析完了,接下来就让我们看看核心的工厂方法 createLoadableComponent: function createLoadableComponent(loadFn, options) { // 必须传入 loading 组件 if (!options.loading) { throw new Error("react-loadable requires a `loading` component"); } // 初始化 options 参数 let opts...
function createLoadableComponent(loadFn, options) { if (!options.loading) { throw new Error("react-loadable requires a `loading` component"); } let opts = Object.assign( { loader: null, loading: null, delay: 200, timeout: null, render: render, webpack: null, modules: null }, options...
Not to mention all the places where you can defer loading content until higher priority content is finished loading. That component at the bottom of your page which loads a bunch of libraries: Why should that be loaded at the same time as the content at the top? And because routes are ju...
Not to mention all the places where you can defer loading content until higher priority content is finished loading. That component at the bottom of your page which loads a bunch of libraries: Why should that be loaded at the same time as the content at the top? And because routes are ju...
Theloadingcomponent should accept 2 props: error?: Error: when error isundefined, the component is being loaded. Otherwise, there is an error. If the data is ready, this component will not be rendered. retry(): any: to retry if there is an error. ...
functionMyLoadingComponent({error}){ if(error){ return<div>Error!</div>; }else{ return<div>Loading...</div>; } } import() 自动分割代码 import() 的一个优点是增加新代码时,Webpack 2 可以自动分割代码。 也就是说你只要使用 React Loadable、改用 import(),就可以轻松地用新的代码分割点进行试...
So your loading component will also get a pastDelay prop which will only be true once the component has taken longer to load than a set delay.function Loading(props) { if (props.error) { return <div>Error! <button onClick={ props.retry }>Retry</button></div>; } else if (props....
import React, { Component } from 'react'; import Button from './Button'; // Import a component from another file class DangerButton extends Component { render() { return <Button color="red" />; } } export default DangerButton; Be aware of the difference between default and named exports...
So your loading component will also get apastDelaypropwhich will only be true once the component has taken longer to load than a setdelay. functionLoading(props){if(props.error){return<div>Error!<buttononClick={props.retry}>Retry</button></div>;}elseif(props.pastDelay){return<div>Loading...
To make this all nice, yourloading componentreceives a couple different props. Loading error states When yourloaderfails, yourloading componentwill receive anerrorprop which will be anErrorobject (otherwise it will benull). functionLoading(props){if(props.error){return<div>Error!<buttononClick={...