xrender是阿里的中后台「表单/表格/图表」开箱即用解决方案。
先采用在线工具创建一个简单的schema:simple.ts
export default {
"type": "object",
"properties": {
"title": {
"title": "标题",
"type": "string",
"props": {
"placeholder": "标题"
},
"required": true,
"message": {
"required": "请输入标题"
},
"min": 10,
"maxWidth": "340px",
"widget": "input"
},
"type": {
"title": "类型",
"type": "string",
"props": {
"options": [
{
"label": "专科",
"value": "专科"
},
{
"label": "本科",
"value": "本科"
},
{
"label": "硕士",
"value": "硕士"
},
{
"label": "博士",
"value": "博士"
}
]
},
"defaultValue": {
"type": "本科"
},
"maxWidth": "340px",
"widget": "radio"
}
},
"displayType": "row"
}
App.tsx
:
import { message } from "antd";
import FormRender, { useForm } from "form-render";
import schema from "./simple";
export default () => {
const form = useForm();
const onFinish = (data) => {
message.info(JSON.stringify(data));
};
return (
<FormRender
form={form}
schema={schema}
onFinish={onFinish}
footer={true}
maxWidth={360}
/>
);
};
标签:示例,value,xrender,FormRender,import,message,label,type
From: https://www.cnblogs.com/soarowl/p/18353633