访问具有“循环”依赖关系的顶级文件范围中的导入模块？

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 将在我们尝试导入后单击几下在冲洗器上定义，但这对您的构建来说太晚了。

您可以通过在 import 语句之后立即记录 CheckBox 并在几毫秒后记录这一点...

// /components/DateSelect/DateSelect.js:

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

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

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

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

避免冲洗

您可以通过直接从 components/CheckBox.js 导入来避免循环往复，或者将索引模块更深一层并创建一个小 CheckBox 模块...

/components
  /CheckBox
    CheckBox.js
    index.js

...然后import {CheckBox} from '/components/Checkbox'