Reactjs react 16，使用数组进行渲染，在复杂渲染中使用第一个和最后一个元素condition A和divl进行渲染

我有一个返回数组的渲染器，它工作得很好，它迭代数组以显示表单中的字段。但现在我想用div将一些字段有条件地按照属性分组。得到像这样的东西

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

我的代码正在工作：

      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,
      ];

返回[
,
fields.length==1&&subindex+1==Object.keys（表[tableCrud].fields[fieldParentKey].subfields）.长度？
：null，
];

我的新codigo不起作用，在数组的顶部和底部添加and，但条件是：

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>),
       ];

返回[
（subfield.formNewSection&），
,
（fields.length==1&&subindex+1==Object.keys（表[tableCrud].fields[fieldParentKey].subfields）。长度？
：null）
（subfield.formNewSection&），
];

通过此修改，我可以在屏幕上打印“fields.length==1&&subindex+1===…”

---

可以用react做我想要的吗？我不能用简单的方法来做，因为这个渲染是在另一个渲染中。map，有些字段有一个标记，可以按div分组，而另一个字段没有，所以我看不出简单的解决方案，为什么不在字段前面和末尾添加div标记，如：

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

---

您能提供数据的数组结构或真实数据吗？我会看一看，看看是否能帮您解决这个问题

一个想法是，假设您有一个数据结构，其中包含具有索引的项或长度与字段相等的项，如下所示：
{
0: [ ... ,  ]
…到任何数据长度
}{item.map（poop=>…）}）。。。非常确定你从这里得到了它希望这有帮助，不确定这是最好的实现，但这是一个错误…
很抱歉，但是这个渲染很复杂，字段有一个可选的子字段。formNewSection属性，这个渲染在另一个渲染循环中如果你需要帮助或任何不清楚的地方，请随意评论：Di'v刚刚更新了我的答案，也许我需要对数组进行预处理以获得一个新的数组，就像您在示例组[{groupfields1}，{groupfields2}中建议的那样例如，如果你只是应用逻辑创建一个符合我所需结构的数组，那么我很确定你会得到你的答案，但无论如何都要尝试去做在后端，cpu处理不在前端处理。
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>),
       ];

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