低代码引擎实战 - 从零封装低代码组件

一、 Container

构造页面时需要给其他组件一个容器来包裹，先用 vant 的 Card 组件来封装我们的容器组件 Container。

src/components 目录下新建 Container 文件夹，再创建 Container.tsx 和 index.tsx 文件

Container.tsx

import * as React from 'react';
import {
   createElement} from 'react';
import {
   Card} from 'react-vant';
import './index.scss'

export interface ContainerProps {
   
  title?: string;
  style?: 'object'
  direction?: 'row' | 'column'
}

/**
 * 由 Card 组成的 container 容器
 * @param title
 * @param children
 * @param otherProps
 * @constructor
 */
const JContainer: React.FC<ContainerProps> = ({
   title, children, direction = 'column', style = {
   }, ...otherProps}) => {
   
  const _style = style || {
   } as any;
  _style.flexDirection = direction;
  const _otherProps = otherProps || {
   } as any;
  _otherProps.style = _style;
  
  return (
    <Card>
      {
   title && <Card.Header>{
   title}</Card.Header>}
      <Card.Body>
        <div className={
   'container-wrapper'} {
   ..._otherProps}>
          {
   children}
        </div>
      </Card.Body>
    </Card>
  )
}

export default JContainer
复制代码

direction 属性是控制 Container 里面元素的排列方式，对应 flex 布局的 flex-direction 属性。

index.tsx

import Container from './Container'

export type {
   ContainerProps} from './Container'
export default Container;
复制代码

然后在 src/index.tsx 导出

export type {
   ContainerProps} from './components/container'
export {
   default as Container} from './components/container'
复制代码

运行命令 npm run lowcode:dev 会看到跟 src 同级的目录 lowcode 目录下多了个 container 文件夹，里面有个 meta.ts 文件，这是根据代码生成的组件描述文件，在拖拽使用这个组件时，低代码引擎根据这个描述文件来解析组件。

import {
    ComponentMetadata, Snippet } from '@alilc/lowcode-types';

const ContainerMeta: ComponentMetadata = {
   
  "componentName": "Container",
  "title": "Container",
  "docUrl": "",
  "screenshot": "",
  "devMode": "proCode",
  "npm": {
   
    "package": "mini-elements",
    "version": "0.1.1",
    "exportName": "Container",
    "main": "src/index.tsx",
    "destructuring": true,
    "subName": ""
  },
  "configure": {
   
    "props": [
      {
   
        "title": {
   
          "label": {
   
            "type": "i18n",
            "en-US": "title",
            "zh-CN": "title"
          }
        },
        "name": "title",
        "setter": {
   
          "componentName": "StringSetter",
          "isRequired": true,
          "initialValue": ""
        }
      }
    ],