Javascript 理解嵌套组件中的模块范围

在重构工作中的一些代码时，我遇到了嵌套React组件的循环依赖关系。该功能基本上是“使用开关动态渲染嵌套在其他组件中的组件，包括它们自己”

我通过使用两种方法创建组件“注册表”解决了这个问题，

registerBlock

和HOC

BlockRegistry

src/BlocksNode.js

//src/BlocksNode.js-接受并呈现从API传递的块
从“/BlockRegister”导入块注册表，{registerBlock}
从“./ComponentOne”导入ComponentOne
从“./ComponentTwo”导入ComponentTwo
//接受名称和组件
registerBlock（'componentOne'，componentOne）
registerBlock（'componentTwo'，componentTwo）
//从API读取块并使用从props传递的类型
const BlocksNode=（道具）=>{
常量{type，blocks}=props
返回
}
导出默认块节点

src/BlockRegister.js

const components={}
导出函数寄存器块（名称、组件）{
组件[名称]=组件
}
常量块注册表=（道具）=>{
常量{type，…rest}=props
常量组件=组件[类型]
返回
}
导出默认区块注册表

src/ComponentOne.js

从“./BlockRegister”导入块注册表
功能组件一（道具）{
常量{blocks}=props
返回(
{blocks.map（（block）=>{
常量{type，blocks}=block
返回
})}
)
}
导出默认组件一

ComponentOne.js

可以传递任意数量的其他块，包括

ComponentTwo.js

或其本身。我简化了一些逻辑，但要点就在这里

这个解决方案非常有效。但我不明白它是如何运作的。从逻辑上讲，我希望嵌套组件的作用域不包括顶级注册组件。如何处理作用域，使嵌套组件在没有对

registerBlock（）

的新嵌套调用的情况下工作

例如，如何在

ComponentOne.js

中找到

block.type=='componentTwo'

的匹配项？我希望需要重新注册它，即在

ComponentOne.js

中执行

registerBlock（'componentTwo'，componentTwo）

。它在没有呼叫的情况下工作这一事实似乎很奇怪

// src/BlocksNode.js - accepts and renders a block passed from the API

import BlockRegistry, { registerBlock } from './BlockRegister'
import ComponentOne from './ComponentOne'
import ComponentTwo from './ComponentTwo'

// accepts a name and a component
registerBlock('componentOne', ComponentOne)
registerBlock('componentTwo', ComponentTwo)

// reads a block from the API and uses the type passed from props
const BlocksNode = (props) => {
const { type, blocks } = props
return <BlockRegistry type={type} blocks={blocks} />
}
export default BlocksNode

const components = {}

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

const BlockRegistry = (props) => {
  const { type, ...rest } = props
  const Component = components[type]
  return <Component {...rest} />
}

export default BlockRegistry

import BlockRegistry from './BlockRegister'

function ComponentOne(props) {
  const { blocks } = props
  return (
    <div>
      {blocks.map((block) => {
        const { type, blocks } = block
        return <BlockRegistry type={type} blocks={blocks} />
      })}
    </div>
  )
}

export default ComponentOne