React中父组件嵌套子组件获取参数

需求：根据报文类型的不同，每种报文类型的字段也有所不同。通过后端返回的报文字段的字符串，前端将字符串转为对象，根据后端返回的对象，展示当前报文的页面字段。

 

 实现思路：根据需求将建立三个组件，域组件主要用来展示字段。块组件用来展示可增加和删除的块，块组件里面通过域组件来进行展示。最终在模板组件，对后端返回的所有的模板字段进行判断，遍历模板字段，如果后端返回的字段类型是个域就直接展示域组件，如果返回的字段类型是个块就展示块组件。在模板组件将所有域和块的字段值进行集中，从而获取所有的报文字段数据，对数据进行处理之后提交到后端。

数据类型：

难点：随着块增加多个相同的域之后，获取这些不同的域的数据，采用给不同的表单字段的key来进行实现，这样多个相同的域因为key的不同，获取的不同域的数据也不会有所冲突。

 getPageItem = (itemTitle, itemValue, index) => {
    const { form } = this.props;
    const { getFieldDecorator } = form;
    const pageItem = [];
    const childrenValue = _.get(itemValue, 'value');
    if (_.isArray(childrenValue)) {
      _.each(childrenValue, item => {
        const labelValue = _.get(item, 'label') || _.get(item, 'name') || '';
        const values = _.get(item, 'value');
        const value = this.getDefaultValue(labelValue, values);
        // key通过拼接不同的字段名，标签，块的数组排序来进行区分
        const key = `${itemTitle}-${item.name}-${item.label}-${index}`;
        const colItem = (
          <FormItem label={labelValue} className={item.must ? styles.MustItem : ''}>
            {getFieldDecorator(key, {
              initialValue: value,
              rules: item.isNull === 'N' ? [{ required: true, message: '请输入必填信息！' }] : [],
            })(this.getFormItem(item))}
          </FormItem>
        );
        pageItem.push(colItem);
      });
    } else {
      const key = `${itemTitle}-${index}`;
      const colItem = (
        <FormItem label="">
          {getFieldDecorator(key, {
            initialValue: _.get(itemValue, 'value') || '',
          })(this.getFormItem(itemValue))}
        </FormItem>
      );
      pageItem.push(colItem);
    }
    return pageItem;
  };

字段获取的传参

最终传参