react 组件名可以使用变量吗？或者传入组件的props可以用整个object传吗？

Question

react 组件名可以使用变量吗？或者传入组件的props可以用整个object传吗？

switch (fieldObj.type){
   case 'input' :
            return <Input
                hidden={fieldObj.hidden===true?'hidden':undefined}
                disabled={fieldObj.disabled===true}
                key={fieldObj.id}
                value={!fieldObj.value||typeof fieldObj.value=="string"?fieldObj.value:fieldObj.value[this.props.index]}
                onChange={(e)=>this.props.changeValue(e,fieldObj)}
                style={style}
                placeholder={fieldObj.placeholder}
            />;
        case 'select':
            return <Select
                style={style}
                hidden={fieldObj.hidden===true?'hidden':undefined}
                disabled={fieldObj.disabled===true}
                key={fieldObj.id}
                value={fieldObj.value}
                onChange={(e)=>this.props.changeValue(e,fieldObj)}
                placeholder={fieldObj.placeholder}
            >
                {
                    fieldObj.dataId?fieldObj.dataId.map(function(selectData,index){
                        return <Select.Option
                            value={selectData}
                            key={fieldObj.id+"option"+selectData}
                        >
                            {fieldObj.dataValue[index]}
                        </Select.Option>
                    }):null
                }
            </Select>;
        case 'textarea':
            return <Input.TextArea
                autosize
                style={style}
                hidden={fieldObj.hidden===true?'hidden':undefined}
                disabled={fieldObj.disabled===true}
                key={fieldObj.id}
                value={fieldObj.value}
                onChange={(e)=>this.props.changeValue(e,fieldObj)}
                placeholder={fieldObj.placeholder}
            />;
            
            

每次只能通过switch的方式来调用不同的组件，有什么方法可以在组件名中写变量，比如<{type}/>之类的。或者说所有的props可以放在一个对象里面传下去吗，就像<Input props={props} /> ,每次都这样写感觉重复的代码太多了

Answer 1

把重复的代码提取出来，类似于这样：

const props = {
                hidden: fieldObj.hidden===true?'hidden':undefined,
                disabled: fieldObj.disabled===true,
                key: fieldObj.id,
                value: !fieldObj.value||typeof fieldObj.value=="string"?fieldObj.value:fieldObj.value[this.props.index],
                onChange: (e)=>this.props.changeValue(e,fieldObj),
                style: style,
                placeholder: fieldObj.placeholder,
}

再传到组件中

<component ...{props}/>

Answer 2

把重复的属性提出来，存到一个对象里，再通过ES6的扩展运算符进行扩充或改写