Package Exports
- form-render
- form-render/es
- form-render/es/index.js
- form-render/es/models/bindValues
- form-render/es/models/bindValues.js
- form-render/es/models/expression
- form-render/es/models/expression.js
- form-render/es/models/filterValuesHidden
- form-render/es/models/filterValuesHidden.js
- form-render/es/models/filterValuesUndefined
- form-render/es/models/filterValuesUndefined.js
- form-render/es/models/flattenSchema
- form-render/es/models/flattenSchema.js
- form-render/es/models/formCoreUtils
- form-render/es/models/formCoreUtils.js
- form-render/es/models/sortProperties
- form-render/es/models/sortProperties.js
- form-render/es/models/validateMessage
- form-render/es/models/validateMessage.js
- form-render/es/models/validates
- form-render/es/models/validates.js
- form-render/es/render-core
- form-render/es/render-core/index.js
- form-render/lib/index.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (form-render) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
FormRender
一站式中后台表单解决方案
官网
https://xrender.fun/form-render
FormRender 是中后台开箱即用的表单解决方案，通过 JsonSchema 协议动态渲染表单。为了能切实承接日益复杂的表单场景需求，2.0 我们进行了底层重构。我们的目标是以强大的扩展能力对表单场景 100% 的覆盖支持，同时保持开发者能快速上手，并以表单编辑器、插件、自定义组件等一系列周边产品带来极致的开发体验。在开发 1.0 的道路上，我们做了一系列的取舍，详见v2 升级方案
安装
FormRender 依赖 ant design，单独使用不要忘记同时安装 antd
npm i form-render --save使用
最简使用 demo：
import React from 'react';
import { Button } from 'antd';
import FormRender, { connectForm } from 'form-render';
const schema = {
type: 'object',
properties: {
input1: {
title: '简单输入框',
type: 'string',
required: true,
},
select1: {
title: '单选',
type: 'string',
props: {
options: [
{ label: '早', value: 'a' },
{ label: '中', value: 'b' },
{ label: '晚', value: 'c' }
]
}
},
},
};
class Demo extends React.Component {
render() {
const { form } = this.props;
return (
<div>
<FormRender form={form} schema={schema} />
<Button type="primary" onClick={form.submit}>
提交
</Button>
</div>
);
}
}
export default connectForm(Demo);对于函数组件，FormRender 提供了 useForm hooks, 书写更为灵活
import React from 'react';
import { Button } from 'antd';
import FormRender, { useForm } from 'form-render';
const schema = {
type: 'object',
properties: {
input1: {
title: '简单输入框',
type: 'string',
required: true,
},
select1: {
title: '单选',
type: 'string',
props: {
options: [
{ label: '早', value: 'a' },
{ label: '中', value: 'b' },
{ label: '晚', value: 'c' }
]
}
}
}
};
const Demo = () => {
const form = useForm();
return (
<div>
<FormRender form={form} schema={schema} />
<Button type="primary" onClick={form.submit}>
提交
</Button>
</div>
);
};
export default Demo;