可视化搭建会遇到如下三类容器组件:
简单容器:以
children
容纳子组件的容器。卡片容器:以
props.header
加上props.header
等多个插槽容纳子组件的容器。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: [
{