反应 16，使用数组渲染，在复杂渲染中使用 divl 的第一个和最后一个元素条件

Question

我有一个返回数组的渲染，它运行良好，它迭代数组以显示表单中的字段。但是现在我想用divs 括起来，以有条件地将一些字段分组到属性中。得到一些喜欢的人

<div class='section>
   <Field>
   <Field>
</div>
<div class='section>
   <Field>
</div>

实际上我只是得到：

<div class='section>
   <Field>
   <Field>
</div>

我的对象中的分支示例：(这是当字段具有"formNewSection"属性来分隔按div 分组的字段时(

    "identitydocs": {
        "type": "String",
        "dbtype": "Json",
        "labelChildsGlobal": true,
        "labelChildsShow": true,
        "subfields": {
            "id": {
                "type": "ID",
                "typeInput": "hidden"
            },
            "type": {
                "type": "String",
                "label": "id_doctype"
            },
            "country": {
                "type": "String",
                "validators": [
                    "required"
                ],
                "typeInput": "selectBox",
                "listSource": "countries"
            },
            "number": {
                "type": "String",
                "label": "id_docnumber"
            },
            "idnameisother": {
                "type": "Boolean",
                "typeInput": "checkbox",
                "formNewSection": true
            },
            "lastname": {
                "type": "String",
                "validators": [
                    "required",
                    "alphai18n",
                    "minLength:3"
                ],
                "normalize": "UpperCase"
            },
            "firstname": {
                "type": "String",
                "validators": [
                    "required",
                    "alphai18n",
                    "minLength:3"
                ]
            },
            "idexpiration": {
                "type": "String",
                "dbtype": "Date"
            },
            "idiauthority": {
                "type": "String"
            },
            "ididate": {
                "type": "String",
                "dbtype": "Date"
            },
            "idaddressisother": {
                "type": "Boolean",
                "typeInput": "checkbox",
                "formNewSection": true
            },
            "addressline1": {
                "type": "String",
                "validators": [
                    "required"
                ]
            },
            "addressline2": {
                "type": "String",
                "validators": [
                    "required"
                ]
            },
            "cp": {
                "type": "String",
                "inputSize": 7
            },
            "city": {
                "type": "String"
            },
            "cityid": {
                "type": "ID",
                "typeInput": "hidden"
            }
        }
    },

我的代码工作：

      return [
        <Field
          key={index+'-'+subindex+'-'+fieldKey}
          name={`${rowValues}.${fieldKey}`}
          type={subfield.typeInput ? subfield.typeInput : 'text'}
          typeInput={subfield.typeInput ? subfield.typeInput : 'text'}
          component={FormField}
          label={field.labelChildsShow ? t(labelKey ):''}
          placeHolder={!field.labelChildsShow || subfield.placeHolder ? t(labelKey) : ''}
          listSource={subfield.listSource ? aSources[subfield.listSource] : ''}
          index={subindex + 1}
          width="270px"
          icon={subfield.icon}
        />,
        fields.length === 1 && subindex + 1 === Object.keys(Tables[tableCrud].fields[fieldParentKey].subfields).length ?
          <div key={index+'-'+subindex+'-b'} style={ { marginTop: "10px", marginRight: "5px" } }><a href="#" onClick={() => fields.remove(index)}>
            <ShowIcon size="25" color="gray" icon="removecircleblack"/>
          </a></div>
          : null,
      ];

我的新codigo不起作用，在阵列的顶部和botomm上添加和，但有条件：

return [
                (subfield.formNewSection && <div className="formSubSection" >),
                <Field
                  key={index+'-'+subindex+'-'+fieldKey}
                  name={`${rowValues}.${fieldKey}`}
                  type={subfield.typeInput ? subfield.typeInput : 'text'}
                  typeInput={subfield.typeInput ? subfield.typeInput : 'text'}
                  component={FormField}
                  label={field.labelChildsShow ? t(labelKey ):''}
                  placeHolder={!field.labelChildsShow || subfield.placeHolder ? t(labelKey) : ''}
                  listSource={subfield.listSource ? aSources[subfield.listSource] : ''}
                  index={subindex + 1}
                  width="270px"
                  icon={subfield.icon}
                />,
                (fields.length === 1 && subindex + 1 === Object.keys(Tables[tableCrud].fields[fieldParentKey].subfields).length ?
                  <div key={index+'-'+subindex+'-b'} style={ { marginTop: "10px", marginRight: "5px" } }><a href="#" onClick={() => fields.remove(index)}>
                    <ShowIcon size="25" color="gray" icon="removecircleblack"/>
                  </a></div>
                  : null)
                  (subfield.formNewSection && </div>),
       ];

使用此修饰，我得到打印"fields.length === 1 && subindex + 1 === ..."在屏幕上。

有可能用 React 做我正在寻找的事情吗？我不能以简单的方式做到这一点，因为这个渲染在另一个渲染中使用 .map 进行，有些字段有一个标记可以按div 分组，而另一个则没有，所以我看不到简单的解决方案

Answer 1

您能否提供数组结构或数据的真实数据，我会看一下，看看我是否可以为您提供帮助。

一个想法是假设你有一个数据结构，其中包含索引或长度等效于字段的项目，如下所示：{0: [ ... , ]...到任何数据长度} <-- 这可以是数组而不是对象遍历这个容器/w.e，并在它周围有一个div

如果使用数组或对象，则挂起，如果对象可以使用Object.keys(w.e(like poopArrayContainer.map( (item，ind( => { item.map( poop => ... ( } ) ...很确定你从这里得到它希望有所帮助，不确定这是最好的实现，但这是一个 thot LuL...

Answer 2

为什么不直接在字段 1 之前和末尾添加div 标签，例如：

        <div className="formSubSection" > <Field.......
    .. 
        </a></div></div>
        : null)