安利一个表格插件form-render

开发表格添加功能的时候，找到的一个阿里的开源插件，记录下使用

官网

安装

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解释

使用自定义的组件，官方的组件不一定是符合自己业务的，formRender支持自定义组件的使用，上例就是使用了自定义日期、选择树、和文章内容(markdown编辑器)

官方解释

自定义组件获取的参数

markDown编辑器for-editor

安装

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

具体的展示

具体的用法可以参考官网