Appsmith - 自定义组件

写组件样式## 自定义组件，官方文档

1. 执行yarn命令

    cd app/client && yarn generate:widget

生成文件结构：

1. component/: 渲染组件
2. widget/: 处理组件逻辑。继承自BaseWidget：
   • executeAction()：调用控制面板中配置的action
   • disableDrag(true)：阻止组件被拖动。例如，在表格中reorder时，需要调用该方法
   • updateWidgetProperty()：更新单个属性
   • deleteWidgetProperty()：删除组件属性
   • batchUpdateProperty()：更新多个属性
   • resetChildMetaProperty()：重置所有meta元属性
   • updateWidgetMetaProperty()：更新meta元属性。注意需要设置 needsMeta: true
3. constants: widget和component使用的公共常量
4. icon: 图标
5. index: 配置默认信息。属性定义：src/widgets/constants.ts

   {
       type: Widget.getWidgetType(),
       iconSVG: IconSVG,
       name: "Text", // 组件在属性面板中显示的名称
       needsMeta：true，// 是否需要存储临时属性。例如，用户输入值或状态。
       isCanvas: ture, // 这个组件本身是否包含Canvas。
       defaults: { //设置组件的默认属性，这里没有设置的默认都为undefined
           widgetName: "Text", //自动生成组件名的前缀
           rows: 4, //默认占用行数
           columns: 16, //默认占用列数
           version: 1,
           blueprint: {},
           enhancements: {},
   
           /* 其他组件本身的默认值 */
           animateLoading: true,
           ...
       },
       properties: {
           config: Widget.getPropertyPaneConfig(), //返回 PropertyPaneSectionConfig[] | PropertyPaneControlConfig[]
           derived: Widget.getDerivedPropertiesMap(), //返回派生属性(从其他属性派生而来的属性，类似计算属性)
           default: Widget.getDefaultPropertiesMap(), //返回属性默认配置，通常是给meta属性设置
           meta: Widget.getMetaPropertiesMap(), //返回临时存储的属性
           stylesheetConfig: Widget.getStylesheetConfig(), //返回样式属性
           autocompleteDefinitions: Widget.getAutocompleteDefinitions(), //自动补全配置
           ...
       }, //固定写法
   }
   

2. 注册组件

修改文件：WidgetRegistry.tsx

    // 步骤1
    import VVProgressBarWidget, {
      CONFIG as VV_PROGRESSBAR_WIDGET,
    } from "widgets/VVProgressBarWidget";

    // 步骤2
    export const ALL_WIDGETS_AND_CONFIG = [
      ...
      [VVProgressBarWidget, VV_PROGRESSBAR_WIDGET]
    ]

3. EntityDefinitions 文件配置自动补全，在v1.9.xx以后的版本中已废弃，改为 .../widget/index.ts 文件内配置

问题:

报错：Cannot read properties of undefined (reading 'iconSVG')，可能的原因有：

1. 组件未注册
2. getWidgetType，返回值有修改