React项目优化(6)-表单中组织表单元素(FormItem)的三种方案_form.item

概述

在笔者使用React开发PC端后台管理系统和资金业务系统的过程中，使用最普通，最常见的组件就是表格组件Form及表单组件Table。由于业务比较复杂，导致每一个表单或表格都会有很多元素组成。而系统中又又很多的表单或表格。那么，如何组织表单元素，看似简单，实则对整个项目的开发过程影响重大。合理的表单组织方式，能够减少繁琐的工作量，能够快速的定位问题，处理问题。

本文中，笔者结合自己的项目实践，向大家展示三种在复杂表单中组织表单项的方式。

基础说明

1.我们在项目中使用的是 TinperNext 组件库。其中的表单组件和Antd-design中的表单基本一致。
2.我所说的表单项包括（文本框【Input】，下拉选项【Select】，单选组件【Radio】，日期组件【DatePicker】，数组框组件【NumberInput】），还有一些扩展的自定义组件（如：参照类型【TableFormRef】，档案类型等）。
3.一个表单中包括两种状态：编辑态，阅读态。
4.表单中还需要处理的逻辑如下：* 是否必填* 是否禁用* 是否显示* 是否满足自定义的校验条件* 表单联动逻辑的处理* 表单数据的初始化* 表单提交数据

基础方案

这是使用表单元素的最基础方式。

核心代码示例

// 表单组件定义
class MainForm extends Component {constructor(props) {super(props);this.state = {}}render() {// do something ...return (<div className="edit-collapse"><Row className='f
1