javascript - 内联导入导出组件在热重载时抛出错误

Question

关于上下文，让我试着解释一下。

例如，在我的项目中，我有一个用于组件的文件夹。在该文件夹中，我有我的组件文件和一个 index.js 文件，我在其中导入所有组件并在同一行中导出，如下所示:

export { default as Button } from './button'
export { default as Loader } from './loader'
export { default as ImageBackground } from './image-background'

这样我就可以像那样在屏幕组件中导入这些组件:

import { Button, Loader, ImageBackground } from 'src/components'

如果我编辑组件文件，保存并重新加载项目，一切正常。

问题是，当我在激活热模块替换(热重载)的情况下编辑这些组件中的任何一个时，当它在编辑后被触发时，它会抛出以下错误:

Unhandled JS Exception: Requiring module "src/components/index.js", which threw an exception: TypeError: Cannot redefine property: Button

有人知道为什么会这样吗？

提前致谢!

观察:当我直接导入组件而不使用 index.js 时，或者如果在 index.js 内部，我首先导入组件，然后将组件分配给一个变量，然后导出该变量，它工作正常。

Answer 1

当我在 React 组件中将 render = () => (...) 更改为 render(){ return (...)} 时，我的问题就解决了