如何使用React.lazy?

Question

使用React.lazy如果从一个库中一次性导入多个组件？

const Module = React.lazy(() => {
    return new Promise((resolve: any, reject) => {
        import('moduleCom')
            .then(module => {
                resolve(module)
            })
            .catch(err => {
                reject(err)
            })
    })
})


<Module.A/>
<Module.B/>
<Module.C/>

moduleCom中有A、B、C三个组件，按照以上写法会报错。
只能一个一个import吗？

const A = React.lazy(() => {
    return new Promise((resolve: any, reject) => {
        import('moduleCom')
            .then(module => {
                resolve(module.A)
            })
            .catch(err => {
                reject(err)
            })
    })
})
const B = React.lazy(() => {
    return new Promise((resolve: any, reject) => {
        import('moduleCom')
            .then(module => {
                resolve(module.B)
            })
            .catch(err => {
                reject(err)
            })
    })
})
const C = React.lazy(() => {
    return new Promise((resolve: any, reject) => {
        import('moduleCom')
            .then(module => {
                resolve(module.C)
            })
            .catch(err => {
                reject(err)
            })
    })
})


<A/>
<B/>
<C/>

Answer 1

const A = React.lazy(() => import('moduleCom').then(module => ({ default: module.A })));
const B = React.lazy(() => import('moduleCom').then(module => ({ default: module.B })));
const C = React.lazy(() => import('moduleCom').then(module => ({ default: module.C })));

然后你可以在你的组件里：

<Suspense fallback={<div>Loading...</div>}>
  <A />
  <B />
  <C />
</Suspense>