react.js 如何进行多个嵌套逻辑处理

react.js 如何进行多个嵌套逻辑处理

因为一个页面里同时出现的逻辑过多，例：三个类型，每个类型都有不同的配置项，选择A的时候B需要默认为X值，为了避免全部渲染出来导致页面卡顿的问题，做了配置项显示

function GetAdType(params, adPlacementId) {
  var adType = params.filter(function(item) {
    return item.adPlacementId == adPlacementId;
  });
  return adType;
}
class GetFormItemDom {
  constructor(props, menuKeys) {
    this.menuKeys = menuKeys;
    this.props = props;
    this.getFieldDecorator = props.form.getFieldDecorator;
    // 表单的设置项
    this.values = { ...props.form.getFieldsValue() };
  }
    getAdTypeTx(_this) { 
        let gdt = this.values.gdt || {};
    let FormItem = null;
    let menuKeys = _this.state.menuKey;
    const {
      adSource: { curItem, adPlacementList },
    } = this.props;
    const { visibleStatus } = _this.state;
    var adType = GetAdType(adPlacementList, this.values.adPlacementId);
    // gdt.adType等于 2需要渲染这个模块
    if (
      (menuKeys == 'gdt' && visibleStatus === '添加') ||
      (curItem.type == 'gdt' && visibleStatus === '编辑')
    ) {
      FormItem = (
        <Col md={24} sm={24}>
          <Form.Item label="广告类型">
            {this.getFieldDecorator('gdt.adType', {
              rules: [{ required: true, message: '必填！' }],
              initialValue: adType[0].adType,
            })(
              <Select
                style={{ width: '200px' }}
                disabled
                size="small"
                onSelect={_this.handleAdsPlatformTx}
              >
                <Select.Option value={2}>1</Select.Option>
                <Select.Option value={1}>2</Select.Option>
                <Select.Option value={4}>3</Select.Option>
                <Select.Option value={5}>4</Select.Option>
              </Select>
            )}
          </Form.Item>
        </Col>
      );
    }
    return FormItem;
    }
    //...以此类推
    }
     renderAddForm() {
       let FormItemDom = new GetFormItemDom(this.props);
       //根据不同状态显示不同的下拉框
        let modelSetForm = {
				         kshou: (
			        <Col md={24} sm={24}>
			          <Form.Item>
			           {FormItemDom.getAdTypeTx(this)}
			          </Form.Item>
			        </Col>
			      ),
			      gdt: (
			        <Col md={24} sm={24}>
			          <Form.Item>
			            {FormItemDom.getAdTypeTx(this)}
			          </Form.Item>
			        </Col>
			      ),
			      toutiao: (
			        <Col md={24} sm={24}>
			          <Form.Item>
			          {FormItemDom.getAdTypeTx(this)}
			          </Form.Item>
			        </Col>
			      ),
        }
          return (
          <div> {menuForm}</div>
          ）
     }