Javascript 导出更高的组件包装语法无效？

为什么上面的代码无效<代码>按钮组件是一个普通组件

我从“/Buttons”导出{ButtonPrimary}，这很好

Mt异步组件代码

import asyncComponent from './asyncComponent'

const AsyncButton = asyncComponent(() => import('./Buttons'))
    export { ButtonPrimary } = AsyncButton

import React，{Component}来自“React”
常量asyncComponent=importComponent=>{
类AsyncComponent扩展组件{
状态={
组件：空
}
异步组件didmount（）{
const{default:component}=await importComponent（）
这是我的国家({
组件：组件
})
}
render（）{
const C=this.state.component
返回C？：空
}
}
返回异步组件
}
导出默认异步组件

似乎

import React, { Component } from 'react'

    const asyncComponent = importComponent => {
      class AsyncComponent extends Component {
        state = {
          component: null
        }

        async componentDidMount() {
          const { default: component } = await importComponent()

          this.setState({
            component: component
          })
        }

        render() {
          const C = this.state.component

          return C ? <C {...this.props} /> : null
        }
      }

      return AsyncComponent
    }

    export default asyncComponent

应该是

const AsyncButton = asyncComponent(() => import('./Buttons'))
export { ButtonPrimary } = AsyncButton

---

export{ButtonPrimary}=AsyncButton

语法无效，因为

export

支持。它不进行解构，而且

ButtonPrimary

不是

AsyncButton

属性

如果

ButtonPrimary

是

Buttons

模块导出：

export const ButtonPrimary = asyncComponent(() => import('./Buttons'));

那么应该是:

export { ButtonPrimary } from './Buttons';

---

FYI，您可能想考虑使用现有的解决方案，比如我不知道您期望的是什么。代码>导出{ButnPrime}＝AsyncButton < /C> >。你能解释一下吗？

const AsyncButton = asyncComponent(async () => (await import('./Buttons')).ButtonPrimary);
export { AsyncButton as ButtonPrimary };