Javascript 如何处理嵌套组件循环依赖关系？（使用es6课程）

我正在使用React with Babel（es6）。解决组件之间的循环依赖关系有一个问题

我正在制作一份菜单，其中包括：

• 项目工厂
• 项目文件夹
• 项目通用
• 更多类型项目

ItemFactory

仅根据传递的道具返回任何其他组件

ItemFolder

需要能够重用

ItemFactory

，以构建嵌套菜单项

ItemFactory组件，ItemFactory.js（简化）：

//我需要一个文件夹
从“./ItemFolder”导入ItemFolder
//也导入所有不同的项目
...
功能项工厂（道具）{
开关（道具类型）{
案例“链接”：返回
案例“空白”：返回
案例“文件夹”：返回
默认值：返回
}
}
modules.exports=ItemFactory

ItemFolder组件，ItemFolder.js（简化）：

//我需要工厂
从“/ItemFactory”导入ItemFactory
...
Items=props.Items.map（item=>{
返回
})
module.exports=ItemFolder

正如你所看到的，两者都需要对方。这会导致一些循环依赖性问题，其中我得到一个空对象

---

感谢您的帮助：）

一种方法是让各个组件将自己注入

项目工厂。这样做的好处是使工厂更容易扩展到新类型：

const components = {};

export function registerComponent(name, Component) {
    components[name] = Component;
};

export default function ItemFactory(props) {
    const C = components[props.type];
    return <C {...props} />;
}


// ItemFolder.js
import {registerComponent}, ItemFactory from 'itemFactory';

export default class ItemFolder {
    ...
};

registerComponent("folder", ItemFolder);

const components={}；
导出功能注册表组件（名称、组件）{
组件[名称]=组件；
};
导出默认函数ItemFactory（道具）{
常数C=组件[props.type]；
返回；
}
//ItemFolder.js
从“ItemFactory”导入{registerComponent}，ItemFactory；
导出默认类ItemFolder{
...
};
注册表组件（“文件夹”，ItemFolder）；
在依赖项循环中，导入的项目将解析为尚未初始化的导出绑定。如果不立即使用它们（如调用函数），则不会导致任何问题

您的问题可能是使用CommonJs导出语法。以下方面应起作用：

// itemFactory.js
import ItemFolder from './itemFolder'
…

export default function ItemFactory(props) {
  switch (props.type) {
    case 'link': return <ItemLink {...props} />
    case 'blank': return <ItemBlank {...props} />
    case 'folder': return <ItemFolder {...props} />
    default: return <ItemGeneric {...props} />
  }
}

//itemFactory.js
从“./ItemFolder”导入ItemFolder
…
导出默认函数ItemFactory（道具）{
开关（道具类型）{
案例“链接”：返回
案例“空白”：返回
案例“文件夹”：返回
默认值：返回
}
}


//itemFolder.js
从“/ItemFactory”导入ItemFactory
…
导出默认函数项文件夹（道具）{
让items=props.items.map（item=>{
返回
})
…
}
不要使用
module.exports=
。使用ES6导出。这解决了问题，但是我想评论一下。我之所以使用
module.exports
而不是
export/export default
，是因为更新到babel 6改变了默认导出的工作方式。在阅读了一些类似本文的文章后，我对es6模块有了更好的理解：最后我更新了导出，解决了循环依赖问题，我不得不使用
default
property
require（'./appMenu'）要求菜单。default
在我的应用程序中的另一个点。嗨@Bergi，我也遇到了同样的问题，我应用了你的解决方案，但它仍然不起作用。可能是eslint规则导致了该问题，您能告诉我如何在中禁用导入/无周期规则吗eslint@Dipal我选择了另一个答案，因为它在我的情况下更简单，但肯定是有用的答案。
const components = {};

export function registerComponent(name, Component) {
    components[name] = Component;
};

export default function ItemFactory(props) {
    const C = components[props.type];
    return <C {...props} />;
}


// ItemFolder.js
import {registerComponent}, ItemFactory from 'itemFactory';

export default class ItemFolder {
    ...
};

registerComponent("folder", ItemFolder);

// itemFactory.js
import ItemFolder from './itemFolder'
…

export default function ItemFactory(props) {
  switch (props.type) {
    case 'link': return <ItemLink {...props} />
    case 'blank': return <ItemBlank {...props} />
    case 'folder': return <ItemFolder {...props} />
    default: return <ItemGeneric {...props} />
  }
}

// itemFolder.js
import ItemFactory from './itemFactory'
…

export default function ItemFolder(props) {
  let items = props.items.map(item => {
    return <ItemFactory {...item} />
  })
  …
}