javascript - 使用 'circular' 依赖项访问文件顶级范围中的导入模块？

Question

我有以下模块结构:

/components
├── Button.js
├── Checkbox.js
├── index.js
├── DateSelect
    ├── DateSelect.js
    └── index.js

使用/components/DateSelect/index.js:

import DateSelect from './DateSelect';

export default DateSelect;

/components/index.js:

import DateSelect from './DateSelect';
import Button from './Button';
import Checkbox from './Checkbox';

export {
  DateSelect,
  Button,
  Checkbox,
};

和/components/DateSelect/DateSelect.js:

import { Checkbox } from '../';
// ...code

// I want to do this!
const MyCustomCheckbox = props => <Checkbox style={someStyle} />;

// ...code
class DateSelect extends React.Component {
  // code
}
export default DateSelect;

现在，我想在文件的顶级范围内访问上面代码中的 Checkbox，但我得到 undefined。但是，如果我在 DateSelect 的 render 方法中访问此变量，它就会按预期工作。

我不完全确定为什么会出现这种情况，或者如何解决这个问题(我可以import Checkbox from '../Checkbox'，但我不想更改使用目录的 index.js 文件的模式)，我也想确切地了解发生了什么。有什么想法吗？

Answer 1

您的问题是您对 /components/index.js 中的导出存在循环依赖。

当您的构建工具首次构建应用程序时，它会执行以下操作...

• 从 app.js 开始，它从 components/index.js 导入 DateSelect

• 转到声明其导出的 components/index.js

  // SPOILER: This guy is your problem. We'll call him the douche.
  export {
    DateSelect,
    Button,
    Checkbox,
  };
  

• 要声明冲洗器，需要从 components/DateSelect.js、components/Button.js 和 components/导入内容Checkbox.js

• 转到这些文件并开始构建其中的内容
• 一旦构建 DateSelect，就会被告知从 components/index.js 导入 CheckBox
• 它已经知道 components/index.js 中的冲洗器，因此它会在冲洗器上寻找 CheckBox (它“循环”回它)，但是CheckBox 尚未在 components/CheckBox.js 中声明，因此返回 undefined

这是一个时间问题。 CheckBox 将在我们尝试导入后单击几下在冲洗器上定义，但这对于您的构建来说已经太晚了。

您可以通过在导入语句后立即记录 CheckBox 来显示这一点...

// /components/DateSelect/DateSelect.js:

import { Checkbox } from '../';
console.log(CheckBox); // undefined
setTimeout(() => console.log(CheckBox), 4) // function CheckBox(_ref) { ...

因此，当您尝试声明 MyCustomCheckbox 时，CheckBox 未定义。

当 DateSelect 的 render 方法被调用时，CheckBox 已经被声明。相对而言，这比构建过程要晚。

此类问题没有 100% 安全的解决方案，因为它取决于您的整个应用程序结构。通常最好避免循环回到同一模块

避免冲洗

您可以通过直接从 components/CheckBox.js 导入来避免陷入困境，或者采用更深一层的索引模块方法并创建一个小 CheckBox 模块...

/components
  /CheckBox
    CheckBox.js
    index.js

...然后从 '/components/Checkbox' 导入 {CheckBox}