移动端表单渲染器
基于 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
发布时按照前端规范中的私服发布流程进行发布
