鍍金池/ 問答/HTML5  C++  HTML/ react 組件名可以使用變量嗎？或者傳入組件的props可以用整個object

react 組件名可以使用變量嗎？或者傳入組件的props可以用整個object傳嗎？

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的方式來調(diào)用不同的組件，有什么方法可以在組件名中寫變量，比如<{type}/>之類的?；蛘哒f所有的props可以放在一個對象里面?zhèn)飨氯幔拖?lt;Input props={props} /> ,每次都這樣寫感覺重復(fù)的代碼太多了

回答
編輯回答
六扇門

把重復(fù)的代碼提取出來，類似于這樣：

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}/>
2018年3月11日 08:44
編輯回答
尐飯團(tuán)

把重復(fù)的屬性提出來，存到一個對象里，再通過ES6的擴(kuò)展運(yùn)算符進(jìn)行擴(kuò)充或改寫

2018年1月19日 07:48