JSXで「単一ルート」問題が発生しないようにJSXを連結する方法

Question

JSXでこれを行う方法が不思議です。下のコードを見ると、重複部分があり、<div className={`${cssComponentName}-container`}>がJSXをラップするために使用されています。 JSXで「単一ルート」問題に遭遇することなく、if/elseループと単一のreturn文の外でこれを行うにはどうすればよいですか。ステートレス機能を用いて、以下の可能形で再構成することができる

buildComponent() { 
const { element: {title, type, items }, name } = this.props; 
const cssComponentName = name.toLowerCase(); 
if (type === 'string' || type === 'number') { 
    return (
    <div className={`${cssComponentName}-container`}> 
     <label htmlFor={name}>{title}</label> 
     <input type="text" name={name} /> 
    </div> 
); 
} 

if (type === 'array') { 
    return (
    <div className={`${cssComponentName}-container`}> 
     <label htmlFor={name}>{title}</label> 
     <select name={name}> 
     { this.buildDropdown(items.enum, items.enumNames) } 
     </select> 
    </div> 
); 
} 

}

Answer 1

。

​​

Answer 2

また、このアプローチを試みることがあります。

buildElement(type, name, items) { 
    if (type === 'string' || type === 'number') 
    return buildInput(name); 
    else if (type === 'array') 
     return buildSelect(name, items); 
}  

buildSelect(name, items) { 
    return (<select name={name}> 
      { this.buildDropdown(items.enum, items.enumNames) } 
      </select>); 
}  

buildInput(name) { 
    return (<input type="text" name={name} />); 
}  

buildComponent() { 
    const { element: {title, type, items }, name } = this.props; 
    const cssComponentName = name.toLowerCase(); 

    return (
    <div className={`${cssComponentName}-container`}> 
    <label htmlFor={name}>{title}</label> 
    {this.buildElement(type, name, items)} 
    </div> 
); 
}