Viele verschiedene React/JSX-Elemente alle mit den gleichen "Argumenten" - wie kann man dasselbe Argument übergeben, ohne es erneut zu schreiben?

Question

I wie unten eine IF-Anweisung haben, wo die JSX Argumente (wenn es das ist, was sie genannt werden) die jeweils gleich sind, ist der einzige Unterschied ist die Komponente, die wiedergegeben wird:

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 

Ich frage mich, wenn es einige syntaktische Zucker war, dass ich bin mir nicht bewusst, dass bedeutet, dass ich so etwas wie

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

oder jede andere Art und Weise tun, kann ich dies weniger schrecklich machen - diese Aussage IF hat etwa 30 Bedingungen.

Vielen Dank für Ihre Hilfe!

Ich benutze Webpack mit Babel - ES6/7 so können die moderneren Funktionen, wenn das hilft.

Answer 1

Sie haben es fast schon. Nur müssen die Ausbreitung Operator hinzufügen:

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

Dies wird verteilt alle Eigenschaften object auf jede Komponente.

Answer 2

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

dann tun

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

Answer 3

Verbreitung eine große Auswahl, aber der Vollständigkeit halber hier ist auch ein weiterer Vorschlag.

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

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