将组件索引导入我的不同 screens/pages？

Question

这对你来说可能微不足道，但这是我的第一个 React 项目，我正在努力用 export/import 构建它。情况是这样的。

我的项目中有不同的文件夹

我创建了一个 Components.js 索引来收集我所有的组件并将它们全部导出到不同的 屏幕 。

然后我想在特定页面（例如：主页）中导入我需要的组件

但它不起作用！ 我在控制台中收到此错误：

./src/screens/website/homepage/Homepage.js 中的错误 5:0-57 找不到模块：错误：无法解析“/Users/maxime/acacia/src/screens/website/homepage”中的“./components/Components” 在“/Users/maxime/acacia/src/screens/website/homepage”中解析“./components/Components” 使用描述文件：/Users/maxime/acacia/package.json（相对路径：./src/screens/website/homepage） 字段 'browser' 不包含有效的别名配置 使用描述文件：/Users/maxime/acacia/package.json（相对路径：./src/screens/website/homepage/components/Components） 没有扩展名 字段 'browser' 不包含有效的别名配置 /Users/maxime/acacia/src/screens/website/homepage/components/Components 不存在 .web.mjs

我认为这与主页的导入模块有关(import {NavBar, Footer} from "./components/Components") 但我不能'想不通。 谢谢你的帮助， 最大值

Answer 1

在 Homepage.js 中，您尝试从 ./components/Components 导入，这实际上解析为 src/screens/website/homepage/components/Components。在您的情况下，如我所见，该目录位于其他地方，因此如果您将导入更改为：

import {NavBar, Footer} from "../../../components/Components";

问题应该得到解决。

你还可以做的是将 Components.js 重命名为 index.js 这样当你从它导入时你就不必重复你自己（你将不得不更改从那个文件到处导入如果你重命名它）。

它们看起来像这样（使用当前示例）：

import {NavBar, Footer} from "../../../components";

您可以更进一步，为您的 React 项目配置绝对导入，这样您在从远程目录导入时就不必键入 ../ 或 ../../../。

https://create-react-app.dev/docs/importing-a-component/#absolute-imports