変数を介してコンポーネントに小道具を渡す

Question

私は入力とツールチップをレンダリングし、状態を制御するクラスコンポーネントを持っています。 <SelectInputType>コンポーネントジョブは、 'タイプ'の単一の小道具を取り、テキスト入力、テキストエリア、選択入力、またはチェックボックスグループコンポーネントのいずれかをレンダリングすることです。このSelectInputTypeコンポーネントを通過する必要のある小道具があり、その中には入力コンポーネントの4つすべてに関連するもの（placeholderTextとたとえば必要）と、特定の入力に固有のものがあります（オプションは次のとおりです）。チェックボックスや選択入力にのみ関連します）。マイSelectInputTypeコンポーネントは次のようになります

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

...

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

私はSelectInputTypeコンポーネントまで小道具を渡すためにJSXの広がりを属性使用していますが、私はそれから渡す方法がわかりませんこれらは4つの入力コンポーネントに適用されます（特定のコンポーネントで有効でない特定のプロップではエラーが発生します）

Answer 1

代わりに、コンポーネントの種類ではなく、

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

Answer 2

エラーが発生する可能性があります。あなたが入力タイプごとに必要な小道具を抽出するためのユーティリティ関数を作成することができますので、場合：

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