简体   繁体   English

代码拆分React组件

[英]Code Splitting React components

Im relatively new to React (i'm using preact.js, to be precise) and i am trying to code split out react components using webpack 2. 我对React还是比较陌生的(确切地说,我正在使用preact.js),并且我正在尝试使用Webpack 2对分离出的React组件进行编码。

Im exporting my component as stated in the documentation and i am then importing it on load. 我按照文档中的说明导出组件,然后在加载时importing它。

  import('./components/List').then((List) => {
    render(<List />, document.getElementById('main'));
  });

The script loads but i'm not handling the promise callback correctly and finding it hard to see any documentation that shows a working version. 该脚本已加载,但是我没有正确处理Promise回调,并且很难看到显示工作版本的任何文档。

List returns the following object: List返回以下对象:

在此处输入图片说明

I saw your repo. 我看到了你的回购 It looks like that your list component doesn't have a export default . 看起来您的列表组件没有export default I would add the default and inside your then , when you handle the promise, I'd do it in this way 我会在您的then添加defaultthen在您处理诺言时以这种方式进行操作

.then(module => {
   const Component = module.default;
   render(<Component />, document.getElementById('main'))
})

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM