ReactJS 변수에 푸는 닫지 않은 요소

Question

JSON 요소를 기반으로 양식 요소를 생성하는 양식 작성기가 있습니다. 이 프로세스에서는 열린 요소를 추가하기 때문에 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" 
    } 
] 

예상 출력

<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> 

내가 지금까지 가지고있는 코드 :

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

Answer 1

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

JSON이 왜 평면입니까? 중첩 된 요소를 지원하도록 JSON 스키마를 수정해야합니다.

더 나은 스키마는`경우 (! entry.type)에서

[ 
    { 
     "name": "...", 
     "label": "..." 
    }, 
    { 
     "type": "group", 
     "label": "...", 
     "items": [ 
      { 
       "name": "...", 
       "label": "..." 
      } 
      ... 
     ] 
    } 
]