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

Question

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

我正在构建一个菜单，我们有:

• 元素工厂
• 项目文件夹
• 一般元素
• 更多类型的项目

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

在依赖循环中，导入项将被解析为尚未初始化的导出绑定(bind)。如果您不立即使用它们(例如调用函数)，这应该不会造成任何问题。

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