Render2
渲染函数,可自定义写tsx函数或使用提供renderForm.ts的函数
签名
ts
function render2(formItem: DyFormItem): ReactNode自定义tsx
tsx
const r = [
{
key: "username",
label: "用户名",
value: null,
render2: (f) => <Input placeholder="请输入姓名" {...OmitValue(f, omitFormCommonKey)}/>,
}
]使用renderForm提供的renderXxx
目前提供有 "renderInput"| "renderSelect"| "renderPopSelect"| "renderTreeSelect"| " renderRadioGroup"| "renderRadioButtonGroup"| "renderCheckboxGroup"| "renderSwitch"| "renderDatePicker"| " renderTimePicker"| "renderCheckbox"| "renderDynamicTags"| "renderSlider"| "renderInputNumber"
ts
const r = [
{
key: "username",
label: "姓名",
value: null,
render2: f => renderInput({}, f),
},
{
key: "job",
label: "职位",
value: null,
options: ['前端', '后端'].map((label, value) => ({label, value})),
render2: f => renderSelect([], {}, f),
}
]其中renderXxx最后一个参数传入当前渲染项f,会组合渲染项的简化内容,例如placeholder,showSearch,allowClear,disabled等
与下拉框,单选,复选框相关
其中有
renderSelect,renderPopSelect,renderTreeSelect,renderRadioGroup,renderRadioButtonGroup,renderCheckboxGroup,都包含options,皆为renderXxx第二个参数传递
ts
const opts = Array.from({length: 5}).map((_, i) => `job_${i + 1}`)
const r = [
{
key: "job",
label: "职位",
value: null,
// 下面三种用法提供options均可
/*options: opts,
render2: f => renderSelect([], {}, f),*/
// render2: f => renderSelect(opts, {}, f),
render2: f => renderSelect([], {options: opts}, f)
}
]1.其中options 你在 item项含options的可传入,renderXxx第二个参数也可传入,第三个optionProps也可传入
2.优先级,函数传参 < item的options < optionProps
更多简化render函数等待后续更新