Question

我刚才发现我的模块中存在循环依赖关系。 （cjsx代表Coffee + JSX）

我有一个文件index.cjsx，其中包含以下内容：

modules =
    App: require('./App')
    Code: require('../../components/elements/code/Code')
    Icon: require('./icon/Icon')
    Page: require('./page/Page')
    Toolbar: require('./toolbar/Toolbar')
    Toolbars: require('./toolbar/Toolbars')
    Wysiwyg: require('./wysiwyg/Wysiwyg')

console.log modules
module.exports = modules

然后，在我的应用程序中，我使用以下语法：

{ Icon, Toolbar, Toolbars } = require '../index'

index.cjsx只是为了允许这种语法，并避免单独要求每个模块。

但现在我遇到的问题是我的App组件需要index文件，而我的index文件需要App。存在循环依赖。它本身并没有造成错误，但事情在某些时候变得复杂，因为现在，当我在某个组件中需要index时，我只得到一个空对象{}。

当我在Wysiwyg中添加日志时，我会看到以下内容：

script.js:197 Object {}// The object is empty, console.log require '../index' (in Wysiwyg)
script.js:90 Object {App: Object}// The object is not empty here and contains everything I need. (console.log modules, in index.cjsx)
script.js:209 undefined undefined
script.js:45151 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of `Wysiwyg`.

看起来我的索引实际上是在需要之后加载的。我想知道我是否可以做些什么来解决这个问题，或者我是否必须要求每个包与组件本身分开。感谢您输入：）

我修复了这个问题，不需要来自App组件的索引（它是主组件，位于根目录。并且不在索引文件中列出App组件。

Answer 1

您应该使用index.js文件仅要求当前文件夹中的文件。这样，如果您正确管理文件夹，就可以避免循环依赖。在您的示例中，您将在文件夹工具栏中添加index.cjsx，例如只需Toolbars和{ Toolbar, Toolbars } = require './toolbar'，然后添加到

ConcurrentLinkedQueue

注意：您可以省略索引文件，假设您放置文件夹路径

使用Browserify和React导入节点模块的循环依赖项

1 个答案: