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

最新推荐文章于 2023-08-13 23:53:25 发布

黄子毅

最新推荐文章于 2023-08-13 23:53:25 发布

阅读量215

点赞数

CC 4.0 BY-SA版权

文章标签： javascript react.js 前端 webpack json

本文链接：https://blog.youkuaiyun.com/ascoders/article/details/129134487

本文探讨了在可视化搭建中如何设计容器组件，包括简单容器、卡片容器和Tab容器的定义，强调了Children和treeLike结构的重要性。通过PropTypes的定义，允许组件props接收React组件实例，实现容器功能。总结指出，容器组件的本质是特定prop属性为组件实例，设计目标是提供灵活的容器定义能力，而无需新的组件类型。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

简单容器：以 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: [
    {
      componentName: "input&