Reactjs 将未关闭的元素推送到变量

我有一个表单生成器，它根据JSON元素生成表单元素。因为在这个过程中，我们附加了一个open元素，所以JSX会抛出一个错误。实现这一目标的最佳反应方式是什么

示例JSON:

[
    {
        "name": "1900",
        "label": "Year 1900"
    },
    {
        "name": "",
        "label": "Group 2000",
        "type": "groupstart"
    },
    {
        "name": "2000",
        "label": "Year 2000",
        "select": true
    },
    {
        "name": "2001",
        "label": "Year 2002"
    },
    {
        "name": "2002",
        "label": "Year 2002"
    },
    {
        "name": "",
        "label": "",
        "type": "groupend"
    },
    {
        "name": "2100",
        "label": "Year 2100"
    }
]

let fieldOptions = []
    field.options.selectOptions.map(function(entry){
      if (entry.type === 'groupstart') {
        fieldOptions.push(<optgroup label={entry.label}>)
      } else if (entry.type === 'groupend') {
        fieldOptions.push('</optgroup>');
      } else {
        fieldOptions.push(<option value={entry.name}>{entry.label}</option>)        
      }
    });
    results.push(
      <select
        name={field.name}
        ref={field.name}
        key={field.id}
        onChange={(e) => {field.onChange(e, field.entryType); }}
        onFocus={() => { focusFunction(field); }}
        value={field.value}>
          { fieldOptions }
      </select>
    );

预期产出

<select>
    <option value="1900">Year 1900</option>
    <optgroup label="Group 2000">
        <option value="2000" selected>Year 2000</option>
        <option value="2001">Year 2001</option>
    </optgroup>
    <option value="2100">Year 2100</option>
</select> 

1900年
2000年
2001年
2100年

到目前为止我所掌握的代码片段：

[
    {
        "name": "1900",
        "label": "Year 1900"
    },
    {
        "name": "",
        "label": "Group 2000",
        "type": "groupstart"
    },
    {
        "name": "2000",
        "label": "Year 2000",
        "select": true
    },
    {
        "name": "2001",
        "label": "Year 2002"
    },
    {
        "name": "2002",
        "label": "Year 2002"
    },
    {
        "name": "",
        "label": "",
        "type": "groupend"
    },
    {
        "name": "2100",
        "label": "Year 2100"
    }
]

let fieldOptions = []
    field.options.selectOptions.map(function(entry){
      if (entry.type === 'groupstart') {
        fieldOptions.push(<optgroup label={entry.label}>)
      } else if (entry.type === 'groupend') {
        fieldOptions.push('</optgroup>');
      } else {
        fieldOptions.push(<option value={entry.name}>{entry.label}</option>)        
      }
    });
    results.push(
      <select
        name={field.name}
        ref={field.name}
        key={field.id}
        onChange={(e) => {field.onChange(e, field.entryType); }}
        onFocus={() => { focusFunction(field); }}
        value={field.value}>
          { fieldOptions }
      </select>
    );

let fieldOptions=[]
field.options.selectOptions.map（函数（条目）{
if（entry.type==='groupstart'）{
fieldOptions.push（）
}else if（entry.type=='groupend'）{
fieldOptions.push（“”）；
}否则{
fieldOptions.push（{entry.label}）
}
});
结果：推(
{field.onChange（e，field.entryType）；}
onFocus={（）=>{focusFunction（field）；}}
值={field.value}>
{fieldOptions}
);
是的，这在React（JSX）中是不可能的。你必须做一些类似的事情

let fieldOptions = [];
let group;

for (let index = 0; index < field.options.selectOptions.length; index++) {
    let entry = field.options.selectOptions[index];

    if (!entry.type) {
        let option = <option value={ entry.name }>{ entry.label }</option>;
        if (group) group.push(option);
        else fieldOptions.push(option);
    } else if (entry.type === 'groupstart') {
        group = [];
        group.push(<option value={ entry.name }>{ entry.label }</option>);
    } else if (entry.type === 'groupend') {
        const groupStart = group[0];
        group.push(<option value={ entry.name }>{ entry.label }</option>);
        fieldOptions.push(<optgroup label={ groupStart.label }>{ group }</optgroup>);
        group = null;
    }
}

results.push(
    <select
        name={ field.name }
        ref={ field.name }
        key={ field.id }
        onChange={ (e) => { field.onChange(e, field.entryType); } }
        onFocus={ () => { focusFunction(field); } }
        value={ field.value }>
        { fieldOptions }
    </select>
);

在
if（！entry.type）{
中，是否应该检查
group.length
以查看是否有活动组，如果有，则附加到
组
非
字段选项
？同时移动
组=[]
更改为groupend条件。否则，您将获得组的开始和结束，但中间没有。感谢您的出色工作，我稍微修改了代码。为了将组保留为对象，因为组的结束没有optgroup标签。更新的架构，谢谢，我已将其转发给我的队友，并将对其进行更新相应地。我将用更新后的代码编辑您的代码并接受您的答案。@SuthanBala不用编辑我的答案，而是用您使用的代码在下面创建您自己的答案。谢谢@Tylersbastian，关闭optgroup时有一个小错误。当type==“groupend”时，标签不可用。您能修复这个问题吗，答案是perfe计算机断层扫描。Thanks@SuthanBala更新了。谢谢。不过我想我和你做的不一样