“低代码”开发利器：轻松设置默认容器

2023-03-05 04:50:12

在阿里巴巴低代码引擎中自定义默认表单容器

随着低代码技术的发展，越来越多的企业和个人开始拥抱这种快速构建应用程序的便利方式。低代码引擎 lowcode-engine 作为阿里巴巴开源的低代码框架，凭借其跨平台、高性能和低门槛等特点，受到广泛欢迎。

在 lowcode-engine 中，表单容器是应用程序开发中的基本元素。默认情况下，引擎使用表单容器来创建新的表单。然而，在某些场景下，我们可能需要使用自定义容器来满足特定需求，例如创建弹出窗口表单。

设置默认容器

要设置自定义默认容器，需要编辑项目中的 config/config.js 文件。找到 defaultContainer 变量，并将其值更改为要使用的自定义容器名称。例如，如果要使用弹出窗口容器，则将 defaultContainer 设置为 "PopupWindow"。

// config/config.js
export const defaultContainer = 'PopupWindow';

示例：使用自定义弹出窗口容器

以下示例演示如何在 lowcode-engine 中使用自定义弹出窗口容器：

import React from 'react';
import { useForm } from 'react-hook-form';
import { Button, Form, PopupWindow } from '@lowcode-engine/antd';

const MyForm = () => {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const onSubmit = data => console.log(data);

  return (
    <PopupWindow>
      <Form onSubmit={handleSubmit(onSubmit)}>
        <input {...register('name')} placeholder="Name" />
        {errors.name && <p>{errors.name.message}</p>}
        <Button htmlType="submit">Submit</Button>
      </Form>
    </PopupWindow>
  );
};

export default MyForm;