react-field-mapping
关系映射组件
View the Demo and its source for more.
使用中需要注意的一点是relation，是由组件内部控制的，所以是不受控的，连线后组件内部relation改变，连线也是组件内部控制。但是外部传入的relation是可以改变内部的relation，在组件内会监听传入的relation，可以在onChange的时候改变传入的relation，来达到受控的效果，如果onChange的时候不改变传入的relation，那么relation就是defaultRelation的效果。
API
FieldMapping
| 参数 | 说明 | 类型 | 默认值 | |
|---|---|---|---|---|
| className | 自定义class | string | "" | |
| style | 自定义style | object | {} | |
| source | data | 源表数据（受控） | array | [] |
| columns | 表格列的配置描述，具体项见下表 | ColumnProps[] | [] | |
| onChange | 表数据change监听，目前只有sort会触发，且开启sort时必须同步源表数据后，sort才会生效 | function | (sourceData) => {} | |
| mutiple | 是否允许一个source连接多个target | boolean | false | |
| target | data | 目标表数据（受控） | array | [] |
| columns | 表格列的配置描述，具体项见下表 | ColumnProps[] | [] | |
| onChange | 表数据change监听，目前只有sort会触发，且开启sort时必须同步目标表数据后，sort才会生效 | function | (sourceData) => {} | |
| mutiple | 是否允许多个source连接一个target | boolean | false | |
| isSort | 是否开启字段排序 | boolean | false | |
| edit | 线条是否可以拖动/删除（如果需要预览态，isSort不能为true） | boolean | true | |
| relation | 映射数据（不受控，但是不等同default，可以update） | array[{source:{name,type}, target:{name,type}}] | [] | |
| onChange | 关联变化监听 | function(relation) | - | |
| onDrawStart | 开始关联监听 | function(source, relation) | - | |
| onDrawing | 关联进行中监听 | object | - | |
| onDrawEnd | 关联结束监听 | function(source, relation) | - | |
| closeIcon | 关闭线条的icon url | string | - | |
Column
列描述数据对象，是 columns 中的一项，Column 使用相同的 API。
| 参数 | 说明 | 类型 | 默认值 | |
|---|---|---|---|---|
| align | 设置列的对齐方式 | 'left' | 'right' | 'center' | ‘left | |
| key | 列数据在数据项中对应的 key | string | ||
| render | 生成复杂数据的渲染函数，参数分别为当前行的值 | Function(text, record, index) {} | string | Element | ||
| title | 列头显示文字 | string | ||
| width | 列宽度 | string | '100px' | |