通過變量傳遞道具到組件

我有一個類組件，它呈現輸入和工具提示並控制狀態。 <SelectInputType>組件作業是取一個'type'屬性並呈現文本輸入，文本區域，選擇輸入或複選框組組件。有一些道具需要通過這個SelectInputType組件傳遞，其中一些與所有4個輸入組件（placeholderText和所需的例子）相關，其中一些特定於特定輸入（例如選項是僅與複選框和選擇輸入相關）。通過變量傳遞道具到組件

render() { 
    const inputProps = {}; 
    inputProps.placeholderText = this.props.placeholderText; 
    inputProps.required = this.props.required; 
    inputProps.class = this.props.class; 
    inputProps.value = this.props.value; 
    inputProps.options = this.props.options; 
    inputProps.updateText = this.handleInput; 
    inputProps.handleFocus = this.focusIn; 
    inputProps.handleBlur = this.focusOut; 
    inputProps.handleCheckboxChange = e => this.addCheckboxToList(e); 
    inputProps.closeCheckboxSelector = this.closeCheckboxSelector; 
    inputProps.readableSelectedCheckboxes = this.state.readableSelectedCheckboxes; 

    const inputClass = classNames('input-with-tooltip', { 
     focus: this.state.focus, 
     'step-complete': this.state.completed, 
    }); 

    return (
     <div className={inputClass}> 
     <InputTooltip 
      tooltipText={this.props.tooltipText} 
      completed={this.state.completed} 
     /> 
     <div className="drill-creation-input"> 
      <SelectInputType type={this.props.type} {...inputProps} /> 
     </div> 
     </div> 
    ); 
    }

我SelectInputType組件看起來像這樣...

const SelectInputType = (props) => { 
    let component; 
    if (props.type === 'title') { 
    component = <TextInput />; 
    } else if (props.type === 'text') { 
    component = <TextareaInput />; 
    } else if (props.type === 'checkbox') { 
    component = <CheckboxInput />; 
    } else if (props.type === 'select') { 
    component = <SelectInput />; 
    } 

    return (
    <div> 
     {component} 
     // Need to pass props through to this? 
    </div> 
); 
};

我使用的JSX傳播屬性通過道具下降到SelectInputType成分，但我不知道如何再通這些對4個輸入組件（如果我確實傳遞它們，我會在某些特定組件無法生效時出錯）

來源

2017-07-31 GuerillaRadio

您也可以將組件類型保存在變量中，而不是組件本身：

const SelectInputType = (props) => { 
    let ComponentType; 
    if (props.type === 'title') { 
    ComponentType = TextInput; 
    } else if (props.type === 'text') { 
    ComponentType = TextareaInput; 
    } else if (props.type === 'checkbox') { 
    ComponentType = CheckboxInput; 
    } else if (props.type === 'select') { 
    ComponentType = SelectInput; 
    } 

    return (
    <div> 
     <ComponentType {..props} /> 
    </div> 
); 
};

來源

2017-07-31 13:38:36 tenor528

如果我這樣做，我得到這個錯誤：警告：React.createElement

與傳播運營商創建的組件時，然後用它們在組件中）或類/函數（用於複合組件），但得到：未定義。 – GuerillaRadio

'TextInput'，'TextareaInput'，'CheckboxInput'和'SelectInput'都有值嗎？任何錯別字？ – tenor528

或者。你的「if」語句中的一個肯定會吸引人嗎？「props.type」不等於「標題」，「文本」，「複選框」或「選擇」的情況如何？ – tenor528

您可能會收到錯誤消息。如果是這樣，你可以創建效用函數來提取您每輸入類型所需要的道具：

extractTextInputProps(props) { 
    const { value, className, required } = props 
    return { value, className, required } 
} 

extractSelectInputProps(props) { 
    const { value, handleBlur, updateText } = props 
    return { value, handleBlur, updateText } 
}

你也許可以提取更多的通用功能出這個，所以你不必重複屬性名的兩倍。預期字符串（內建 - 類型無效：

let component; 
if (props.type === 'title') { 
    component = <TextInput { ...extractTextInputProps(props) } />; 
} else if (props.type === 'text') { 
    component = <TextareaInput />; 
} else if (props.type === 'checkbox') { 
    component = <CheckboxInput />; 
} else if (props.type === 'select') { 
    component = <SelectInput { ...extractSelectInputProps(props) } />; 
}

來源

2017-07-31 13:38:44 shotor

通過變量傳遞道具到組件

回答

相關問題