安装
tnpm install -S form-render
使用
import React from 'react'
import FormRender from 'form-render/lib/antd'
import MyDate from './Wiedgts/MyDate'
import MyTreeSelect from './Wiedgts/MyTreeSelect'
import MyContent from './Wiedgts/MyContent'
function FormRenderCom(props)
{
return (
<>
<FormRender
schema={props.schema}
formData={props.formData}
onChange={props.handleChange}
widgets={{ MyDate: MyDate, MyTreeSelect: MyTreeSelect, MyContent: MyContent}}
/>
</>
)
}
export default FormRenderCom
widgets解释
使用自定义组件：https://alibaba.github.io/form-render/guide/advanced/widget
自定义组件获取的参数
自定义组件获取的参数
注意
具体的用法很多，这里我只是展示了自己遇到的问题，详细的请阅读官方文档：https://alibaba.github.io/form-render/
安利一个markDown编辑器
tnpm install -S for-editor
import React from 'react'
import Editor from 'for-editor'
function MyContent({value, onChange, name})
{
// value: 初始值，onChange formrender的函数,name 自定义组件的key值，数据里对应的字段
return (
<React.Fragment>
<Editor
style={{width: '100%', maxWidth: '1024px'}}
value={value}
onChange={val => onChange(name, val)}
/>
</React.Fragment>
)
}
export default MyContent
使用展示
for-editor使用如图
