Как объединить JSX, не сталкиваясь с проблемой «одного корня» с JSX

Question

Мне интересно, как это сделать в JSX. Если вы посмотрите на приведенный ниже код, есть дублированные части, где <div className={`${cssComponentName}-container`}> используется для обертывания JSX. Как это сделать за пределами цикла if/else и одного оператора return, не сталкиваясь с проблемой «единого корня» с JSX.

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

Это может быть перестроена в следующей возможной форме с использованием лица без функции.

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

    const DivWrapper = (props) => { 
    return (
     <div className={`${cssComponentName}-container`}> 
     <label htmlFor={name}>{title}</label> 
     {props.children} 
     </div> 
    ); 
    }; 

    return (
    <DivWrapper> 
    { (type === 'string' || type === 'number') ? 
     <input type="text" name={name} /> : 
     (type === 'array') ? 
     <select name={name}> 
      { this.buildDropdown(items.enum, items.enumNames) } 
     </select> : null 
    } 
    </DivWrapper> 
); 
} 

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