可插拔组件模式

一个主实体 + 可拔插的 Component。Unity、Unreal、Vue 等都用类似思路：主模块容纳组件，按需挂载或卸载。

思路

主模块：一个空壳，只负责布局和容纳组件
Component：独立功能块，通过配置决定挂哪些、不挂哪些

最简实现

1. 主模块（main.jsx）

// main.jsx
function Main({ components = [] }) {
  return (
    <div className="main">
      {components.map((Comp, i) => Comp && <Comp key={i} />)}
    </div>
  )
}

2. 可拔插的 Component（component.jsx）

// component.jsx
function HealthBar() {
  return <div className="health-bar">HP: 100</div>
}

function DragHandle() {
  return <div className="drag-handle">⋮⋮</div>
}

3. 按需挂载

import Main from './main.jsx'
import { HealthBar, DragHandle } from './component.jsx'

// 只挂拖拽
<Main components={[DragHandle]} />

// 挂两个
<Main components={[DragHandle, HealthBar]} />

// 不挂任何组件
<Main components={[]} />

插拔 = 改 components 数组即可。