reactjs - 导入 3 级深度反应

Posted 2023-04-14

【中文标题】reactjs - 导入 3 级深度反应

【英文标题】：reactjs - import 3 levels deep react

【发布时间】：2018-12-09 01:04:02

【问题描述】：

我正在使用 react 并且正在为我的项目尝试新的上下文 API，它是一个“Reddit 克隆”。所以我的Context 是在一个名为provider.js 的文件中创建的，该文件位于src 文件夹中App.js 旁边。现在，我在它自己的文件夹中创建了一个HeaderComponent，它通过以下方式导入Context：

import Context from '../provider'

我在HeaderComponent 中创建了另一个名为LoginComponent 的组件。而且，LoginComponent 在它自己的文件夹中。现在，我通过以下方式导入了Context：

import Context from '.../provider'

../ 导入工作正常，但 .../ 导入抛出错误。

编译失败。

./src/HeaderComponent/LoginComponent/index.js 找不到模块：不能 在 'C:\Users.......\reddit\reactfe\src\HeaderComponent\LoginComponent' 中解析 '.../provider'

【问题讨论】：

在 App.jsx 组件中使用 比在每个组件中添加更有效，因为他将组件共享给他下面的每个人并避免重复。

【参考方案1】：

文件夹结构中的每一步都是..，后跟/。

import Context from '../../provider'

【讨论】：

这可能吗././?? ././ 和 ../../ 有什么区别？

@SreekarMouli ./ 表示the current folder，所以././ 不会带你更进一步。

【参考方案2】：

点的数量并不具有您认为的含义。要记住的事情：

../上一级目录。 ../../ 向上两个目录（等等）。 ./ 与当前目录相同。

考虑到这一点，因为您需要上一个目录（从LoginComponent 到HeaderComponent），然后再上一个目录（从HeaderComponent 到src），因为这是provider.js 所在的位置，你需要做的：

import Context from '../../provider';

【参考方案3】：

如果您在控制台ls -la 中运行，您会看到. 和..。所以. 是您当前的本地位置，.. 是对父文件夹的引用（上一层）。所以如果你需要返回两个文件夹，你需要把它放两次，这样../../。

在你的情况下import Context from '../../provider'