异步高阶组件导出语法无效？为何该写法不合法？

咱们先拆解一下你遇到的问题：你想用asyncComponent包装异步导入的组件模块，然后导出其中的ButtonPrimary，但export { ButtonPrimary } = AsyncButton这段代码完全行不通，而直接用export { ButtonPrimary } from './Buttons'却正常工作。下面我来一步步解释原因：

1. 首先，你的导出语法本身就不合法 #

export { ButtonPrimary } = AsyncButton 是不符合JavaScript模块导出规则的语法。如果要通过解构来导出某个变量，正确的写法应该是先解构再导出：

const { ButtonPrimary } = AsyncButton;
export { ButtonPrimary };

但就算你改成这种写法，依然会报错——因为AsyncButton根本不是一个包含ButtonPrimary的对象。

2. AsyncButton的本质是React组件类，不是模块对象 #

你的asyncComponent是一个高阶组件（HOC），它返回的是一个新的React组件类（也就是AsyncButton）。这个组件的作用是在挂载后异步加载目标组件，然后渲染它，但它并没有把目标模块（./Buttons）里的导出成员（比如ButtonPrimary）挂载到自身上。

换句话说，AsyncButton只是一个用来渲染异步加载组件的“容器”，它本身并不持有ButtonPrimary这个组件——ButtonPrimary只存在于./Buttons模块里，以及AsyncButton内部状态的component属性中（而且这个component其实是模块的默认导出，不是命名导出的ButtonPrimary）。

3. 对比直接导出的情况 #

export { ButtonPrimary } from './Buttons' 是模块导出的标准语法：它直接从./Buttons这个模块中提取命名导出的ButtonPrimary，再把它导出。这和你用HOC包装后的AsyncButton完全不是一回事——AsyncButton不是那个原始模块，自然无法从中解构出ButtonPrimary。

怎么解决？ #

如果你想异步导出ButtonPrimary，可以直接用React的lazy函数来处理命名导出：

export const ButtonPrimary = React.lazy(() => 
  import('./Buttons').then(module => ({ default: module.ButtonPrimary }))
);

这样就能实现异步加载ButtonPrimary组件，同时保持正确的导出语法。

内容的提问来源于stack exchange，提问作者user9728810