我正在尝试导入一个 React 组件,@babel/plugin-syntax-dynamic-import
但我无法使其工作。
这是我的主要组件中的代码:
import React from 'react';
import Loadable from 'react-loadable';
const Test = Loadable({
loader: () => import('./Space').default,
loading: <div>loading</div>
});
const App = () => <Test />;
export default App;
我的空间组件中的代码:
import React from 'react';
const Space = () => <h1>hello from space</h1>;
export default Space;
使用此代码,我收到此错误: Uncaught TypeError: Cannot read property 'then' of undefined
我把它放在这里却不知道它是否有帮助: The above error occurred in the <LoadableComponent> component: react-dom.development.js:17117
是的,我已经@babel/plugin-syntax-dynamic-import
安装并添加到我的 babel 配置文件中。
好的,我使用 React.lazy 解决了它(请参阅 @Mario Subotic 评论)。
这是我的最终代码:
import React, { lazy, Suspense } from 'react';
import Loadable from 'react-loadable';
const Test = lazy(() => import('./Space'));
const App = () => (
<Suspense fallback={<div>Loading...</div>}>
<Test />
</Suspense>
);
export default App;
注意:显然必须
Suspense
在您延迟加载的组件周围使用。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句