webpack 动态加载模块返回promise报错

Question

1. React中点击某按钮动态加载loading组件
   {popularLoading ? <div className="spinner-wrapper">

                 {Comp()}

   </div> : null}

2. 点击按钮后popularLoading为true，调用Comp()
   const Comp = () =>{

     return import('../Spinner').then(module => {
         let Result = module.default
         return <Result/>
     })

   }

因为返回的是promise所以报错了：

求大神帮忙解答如何能正确加载

Answer 1

react里面写jsx不能直接返回promise，你要先把它解开
可以试下这样写

import sp from '../Spinner'
const Comp = async () => {
  let res = await sp.then(module => {
    let Result = module.default
    return <Result />
  })
  return res
}