如何处理React嵌套组件循环依赖？(使用es6类)

Question

我正在使用React with Babel(es6).我有一个问题来解决我的组件之间的循环依赖.

我正在建立一个菜单,我们有:

• ItemFactory
• ItemFolder
• ItemGeneric
• MoreTypesOfItems

ItemFactory 根据传递的props,简单地返回任何其他组件.

将ItemFolder需要能够重复使用ItemFactory,建立嵌套的菜单项.

ItemFactory组件,itemFactory.js(简化):

// I need ItemFolder
import ItemFolder from './itemFolder'

// import all different items too

...

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} />
  }
}

modules.exports = ItemFactory

ItemFolder组件,itemFolder.js(简化):

// I need the itemFactory
import ItemFactory from './itemFactory'
...
Items = props.items.map(item => {
  return <ItemFactory {...item} />
})

module.exports = ItemFolder

你可以看到两者都需要彼此.这会导致一些循环依赖问题,我得到一个空对象.

任何帮助表示赞赏:)

Answer 1

一种方法是将各个组件自身注入到ItemFactory. 这样做的优点是使工厂更容易使用新类型进行扩展：

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);

Answer 2

在依赖关系圈中,导入的项目将解析为尚未初始化的导出绑定.如果您没有立即使用它们(如调用函数),这不应该导致任何问题.

您的问题可能是使用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} />
  }
}

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

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