同じ「引数」を持つReact/JSX要素が多種類あります。同じ引数をもう一度書き直さずに渡す方法は？

Question

（つまり、彼らが呼ばれているものであれば）、私は以下のようなIF文、JSXの引数を持っているが、それぞれの場合に同じであり、唯一の違いは、レンダリングされるコンポーネントです。

if (type === 'currencySalaryBonus') { 
     return <CurrencySalaryBonus key={questionID} data={this.props.data} answer={this.props.answer} nextStepCallback={this.props.nextStepCallback} showTitle={this.props.showTitle} />; 
} else if (type === 'age') { 
     return <Age key={questionID} data={this.props.data} answer={this.props.answer} nextStepCallback={this.props.nextStepCallback} showTitle={this.props.showTitle} />; 
} else if (type === 'name') { 
     return <Name key={questionID} data={this.props.data} answer={this.props.answer} nextStepCallback={this.props.nextStepCallback} showTitle={this.props.showTitle} />; 
} 
.... the list goes on 

私は疑問に思って私はそれを認識していないです、いくつかの糖衣構文があった場合、私は

if (type === 'currencySalaryBonus') { 
    return <CurrencySalaryBonus {object} />; 
} else if (type === 'age') { 
    return <Age {object} />; 
} 
..... 

またはその他の方法のような何かを行うことができることを意味し、私は、これはそれほど恐ろしいことができます - このIF文は、約30の条件があります。

ご協力いただきありがとうございます。

Babel - ES6/7でWebpackを使用しているので、より現代的な機能が役立ちます。

Answer 1

あなたはほとんどそれを持っています。ただ、拡散演算子を追加する必要があります。

if (type === 'currencySalaryBonus') { 
    return <CurrencySalaryBonus {...object} />; 
} else if (type === 'age') { 
    return <Age {...object} />; 
} 

これは各コンポーネント上にobjectのすべてのプロパティを分散します。

Answer 2

object = { 
    key: questionID, 
    data: this.props.data, 
    answer: this.props.answer, 
    nextStepCallback: this.props.nextStepCallback, 
    showTitle: this.props.showTitle 
}; 

はその後

return <Age {...object} />; 

Answer 3

スプレッドは素晴らしい選択肢ですけど、完全を期すために、ここにも別の提案です。

let Component; 
if (type === 'currencySalaryBonus') { 
     Component = CurrencySalaryBonus; 
} else if (type === 'age') { 
     Component = Age; 
} 

return React.createElement(Component, { key: questionID, data: this.props.data });