阿里低代碼框架lowcode-engine設置默認容器詳解

更新時間：2023年02月27日 09:22:57 作者：杰出D

這篇文章主要為大家介紹了阿里低代碼框架lowcode-engine設置默認容器詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

前言

之前我們介紹了lowcode-engine一些基礎相關內容，接下來我們通過引擎實戰(zhàn)一些內容，在一些場景當中，我們的默認容器不是頁面，而是需要自定義容器。例如，在常見的低代碼平臺中默認容器是表單容器，通過表單容器類提供布局能力。接下來我們就去實現這個功能。

物料【FormContainer】開發(fā)

該物料組件主要是用來存放所有FormItem,可以設置列數。

物料組件

接下來我們看代碼內容

export interface IFormContainerProps {
  // 列數
  cols: number;
}
/**
 * Form容器包裝器。lowcode-engine不支持直接使用hooks組件，需要包裹一層，要不內容元素沒辦法直接嵌入
 */
export const FormContainerWrapper = forwardRef<IFormRef | undefined, IFormContainerProps>(function FormContainer({
  cols,
  children
}, ref) {
  const [form] = Form.useForm();
  React.useImperativeHandle(ref, () => {
    return {
      formRef: form
    }
  }, [])
  const getChildren = () => {
    if (React.Children.count(children) <= 1) {
      return children;
    }
    const newArray = groupArray(React.Children.toArray(children), cols);
    return newArray.map(childs => {
      return <Row key={childs?.[0]?.key} gutter={[16, 24]} className={generatorClass('form-container-row')}>
        {
          childs.map(child => {
            const { props } = child;
            const name = props.componentId || props.__id;
            return <Col key={name} span={24 / cols}>
              <Form.Item
                label=""
                name={name}
                rules={[{ required: props.isRequired, message: `${props.title}不能為空！` }]}
              >
                {child}
              </Form.Item>
            </Col>;
          })
        }
      </Row>
    })
  }
  const rootClassNames = classNames(generatorClass('form-container'));
  return (
    <Form form={form} className={rootClassNames}>
      {getChildren()}
    </Form>
  )
});
/**
 * 容器組件
 */
export class FormContainer extends React.Component<IFormContainerProps, any> {
  render() {
    return (
      <FormContainerWrapper {...this.props} />
    )
  }
}

在實現的過程中開始使用的hooks組件，發(fā)現會有問題，我們用class組件包裝了下，就沒什么問題了。后續(xù)遷去看看源碼引擎是怎么加載物料的，再來回答這個問題。

物料Meta信息

上面的物料組件就有一個cols需要配置，對用的setter我們可以使用官方提供的RadioGroupSetter. 由于整個配置模版內容比較多，我只把關鍵點configure配置內容說下。

 "configure": {
    "props": [
      {
        "title": {
          "label": {
            "type": "i18n",
            "en-US": "cols",
            "zh-CN": "列數"
          }
        },
        "name": "cols",
        "setter": {
          "title": "列數",
          "componentName": "RadioGroupSetter",
          "isRequired": true,
          "props": {
            "options": [{
              "label": "1列",
              "value": 1,
            }, {
              "label": "2列",
              "value": 2,
            }, {
              "label": "3列",
              "value": 3,
            }, {
              "label": "4列",
              "value": 4
            }]
          },
          "initialValue": 1
        }
      }
    ],
    "supports": {
    },
    "component": {
      // 是否是容器組件，如果是容器組件，別的組件可以放置內容
      isContainer: true
    },
  }

我們看配置內容，一個是設置setter, 還有比較重要的一點就是在component下需要配置isContainer。如果為true，表示內容其它組件可以拖到該容器內。

模版內容修改

通過研究lowcode-engine，我們可以知道內容的渲染是通過schema.json來渲染內容。我們只需修改下初始的 schema.json。加上容器組件，模版內容為

 "componentName": "Page",
  "id": "node_dockcviv8fo1",
  ...
  "title": "頁面",
  "isLocked": false,
  "condition": true,
  "conditionGroup": "",
  "children": [
    {
      // 容器組件
      "componentName": "FormContainer",
      "id": "node_oclcdgs7nr1",
      "props": {
        "cols": 2
      },
      "hidden": false,
      "title": "",
      "isLocked": false,
      "condition": true,
      "conditionGroup": ""
    }
  ]

我們看引擎的大綱內容，默認就有表單組件了。

這里有一點需要注意，有些場景，我們需要把容器組件toolbar上的操作給禁用掉，這塊比較簡單，可以看下官網怎么設置。

案例展示

我們看一個完整的例子。

結束語

以上就是lowcode-engine設置默認容器。后續(xù)我們會接著把案例完善起來。能做到創(chuàng)建表單，表單預覽，數據的提交等功能。

更多關于lowcode engine設置默認容器的資料請關注腳本之家其它相關文章！

您可能感興趣的文章:

ReactJS入門實例教程詳解
React.render?是?React?的最基本方法，用于將模板轉為?HTML?語言，并插入指定的?DOM?節(jié)點，這篇文章主要介紹了ReactJS入門實例教程,需要的朋友可以參考下
2022-06-06
React中的生命周期用法詳解
這篇文章主要介紹了React中的生命周期用法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2025-03-03
React中的跨組件通信的幾種常見方法
在React中,跨組件通信有幾種常見的方式,每種方式適用于不同的場景,下面是幾種常見的跨組件通信方法,感興趣的朋友一起看看吧
2025-04-04
webpack+react+antd腳手架優(yōu)化的方法
本篇文章主要介紹了webpack+react+antd腳手架優(yōu)化的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-04-04
React 添加引用路徑時如何使用@符號作為src文件
這篇文章主要介紹了React 添加引用路徑時如何使用@符號作為src文件,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-06-06
解決React?hook?'useState'?cannot?be?called?in?
這篇文章主要為大家介紹了React?hook?'useState'?cannot?be?called?in?a?class?component報錯解決方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-12-12
在?React?中使用?i18next的示例
這篇文章主要介紹了在?React?中使用?i18next,本文結合實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-01-01
在React中集成第三方庫和插件方式
本文詳細介紹了如何在React項目中高效集成第三方庫和插件,包括選擇合適的庫、封裝為React組件、按需加載、避免直接操作DOM、處理庫的更新和卸載、樣式處理與主題定制、性能優(yōu)化以及調試與維護等方面,通過遵循這些最佳實踐,可以確保集成過程高效且優(yōu)雅
2025-03-03
React點擊事件的兩種寫法小結
這篇文章主要介紹了React點擊事件的兩種寫法小結，具有很好的參考價值，希望對大家有所幫助。
2022-12-12
React中路由參數如何改變頁面不刷新數據的情況
這篇文章主要介紹了React中路由參數如何改變頁面不刷新數據的情況，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08