可视化搭建 - 容器组件设计

可视化搭建会遇到如下三类容器组件：

1. 简单容器：以 children 容纳子组件的容器。

2. 卡片容器：以 props.header 加上 props.header 等多个插槽容纳子组件的容器。

3. Tab 容器：以 props.tabPanel[x] 等动态数量插槽容纳子组件的容器。

画布本身也是一个容器组件，所以可视化搭建离不开容器。

另一方面，我们应该允许给组件 props 传入 React 组件实例，但组件树是可序列化的 JSON 结构，因此需要一种定义方式，将某些属性转化为 React 组件实例传给组件实例。

容器的定义

任何组件都可能是容器组件，只要它将 props.children 或 props.footer 等任何属性作为 ReactNode 渲染。因此我们不需要特殊声明组件是否为容器，而仅需将某些组件 Key 声明为 ReactNode 节点。

Children

children 因为太常用因此单独强调出来，可以只在在组件实例定义 children 属性，它为是一个数组：

import { ComponentInstance } from "designer";

const componentTree: ComponentInstance = {
  componentName: "div",
  children: [
    {