移动端表单渲染器

基于 form-render 1.x + fr-generator 2.x + formily 2.x + antd-mobile 2.x 的移动端表单渲染

安装

npm i -S @fescotech/form-render-antd-mobile --registry http://47.94.139.51:8081/nexus/repository/fescotech-npm/

使用

import React from "react";
import FormRenderMobile from "@fescotech/form-render-antd-mobile";

const schema = {
  type: "object",
  properties: {
    "input_HUxYX-": {
      title: "输入框",
      type: "string",
      required: true,
    },
  },
};

const App = () => {
  return <FormRenderMobile schema={schema} />;
};

export default App;

三方组件/自定义组件接入

接入现成组件库的话，主要使用 @formily/react 中的 connect/mapProps/mapReadPretty API 来无侵入接入 formily 体系

如果 react 组件本身支持 value/onChange 这样的双向绑定约定，则只需要使用 connect 和 mapProps 即可无侵接入 formily，实现

connect 的入参传入第一个参数是要接入的组件，后面的参数都是组件映射器，每个映射器都是一个函数 IComponentMapper，此时返回的最终组件即为响应式表单组件

interface IComponentMapper<T extends React.FC> {
  (target: T): React.FC;
}
interface connect<T extends React.FC> {
  (target: T, ...args: IComponentMapper<T>[]): React.FC;
}

const Input = connect(
  InputRaw,
  mapProps(
    {
      title: true,
      description: "extra",
      required: true,
      validateStatus: true,
    },
    (props, field) => {
      return {
        ...props,
        errors: field.errors,
      };
    }
  )
);

更多用法见 formily/react

本地开发调试

需要配合 form-preview-mobile 项目联调，具体步骤参见 调试组件库

打包发布

yarn build

发布时按照前端规范中的私服发布流程进行发布