React重新导出组件失败

Question

我正在处理一个React项目，其中每个组件的文件都包含在自己的目录中。我有一个component.jsx文件和一个重新导出零部件默认导出的index.js文件。这是意料之中的事。我想通过从主组件文件夹向目录级别重新导出所有组件来简化导入语句。请参阅下面的示例，了解我当前项目的foloder结构。

src
--components
----Alert
------Alert.jsx
------index.js
----LoginCard
------LoginCard.jsx
------index.js
--index.js

Alert/Alert.jsx

export default function Alert(props) {
// omitted for brevity - the component itself works fine
return <Alert />
}

Alert/index.js

export { default } from './Alert';

此时，导入在LoginCard组件中按预期工作。登录卡.jsx

import { UserContext } from '@contexts';
import Alert from '@components/Alert';
export default function LoginCard(props) {
// omitted for brevity. Again, component works as expected
return <LoginCard />

为了实现我想要的简化导入调用的最终结果，我创建了components/index.js:

components/index.js

export { default as Alert } from './Alert';

然后我尝试将其导入为：登录卡.jsx

import { Alert } from '@components'

当试图从component/index.js作为CCD_ 3导入时；无法读取"未定义"的默认属性；。奇怪的是，我以完全相同的方式导入/导出页面和上下文，并且它们按预期工作。我最初认为这意味着我的组件目录别名有问题，但别名正在工作，因为我可以从@components/Alert导入，只是不能从@components导入

错过了一些简单的东西，还是我遇到了错误？谢谢

Answer 1

我认为这里的问题是，您试图将所有导出向上推送到根目录。当导入根目录之外的时，这是有意义的。问题在于，当在目录结构内时，您正试图从根目录导入。换句话说，在从根目录导出任何内容之前，需要处理目录中的所有导出。

这里的障碍是，您正试图从LoginCard的根导出导入Alert。。。它在处理过程中还没有完成导出，所以根导出还没有准备好。

换句话说，@components/Alert准备好了，而@components没有准备好。

只需从同一components目录中使用Alert(和任何其他导入(的相对导入即可。

import { UserContext } from '@contexts';
import Alert from '@components/Alert';
// or
import Alert from '../Alert';
export default function LoginCard(props) {
// omitted for brevity. Again, component works as expected
return <LoginCard />