より簡単で短くswitch-reactjsの代わりに

Question

変数に文字列 'numpad'があることがわかったら、どのように簡単に同じ名前のコンポーネントをレンダリングできますか？ Numpad、UnitList、ShiftListの各コンポーネントがあり、それらを個別にレンダリングしたい。私は私の子供のコールバックを作っている、私は私の親からレンダリングしたいコンポーネント（文字列）のタイプを返信します。次に、変数をnumpad、unitListまたはshiftListに設定してから、このコンポーネントをレンダリングします。書き込みスイッチよりも簡単な方法はありますか？スイッチで私はちょうどすることができます -

switch(type){ 
    case 'numpad': 
     <Numpad .../> 
     break; 
    case 'unitList': 
    ..... 

} 

しかし、私はもっと簡単で短いものを探しています。今の

私が持っている -

子のコンポーネントで

render(){ 
     return(
     <div> 
      <Child update={this.renderSomeComponent.bind(this)} /> 
      {(() => { 
        switch (this.state.type) { 
         case "numpad": return <Numpad ../>; 
         case "unitList": return <UnitList ../>; 
         case "shiftList": return <ShiftList ../>; 
         case "sideList": return <SideList ../>; 
         default:  return false; 
        } 

      })()} 
     </div> 
    ) 
} 

renderSomeComponent(type){ 
    this.setState({ 
      type: type 
     }) 
} 

私が持っている方法 - 一般的に

handleClick(){ 
     this.props.update(this.props.type); 
    } 

Answer 1

、あなたがswitch ... caseを避けたいとき、あなたはマッピングを処理するためのJavaScriptオブジェクトを使用することができます。

const map = { 
    value1: output1, 
    value2: output2, 
    ... 
} 

あなたは上記の与えた後、次のように書くことができますコード：

import React from "react"; 
import Numpad from "the-location-of-your-numpad-component"; 
import UnitList from "the-location-of-your-unitList-component"; 
... 

const mapTypeToComponent = { 
    numpad: Numpad, 
    unitList: UnitList, 
    ... 
} 

// In your component 
render(){ 
    const { type } = this.state; 
    const ComponentToShow = mapTypeToComponent[type]; 

    return(
    <div> 
     <Child update={this.renderSomeComponent.bind(this)} /> 
     <ComponentToShow /> 
    </div> 
) 
} 

あなたの例では、それは、そのキーあなたの変数の異なる値があり、値が期待される出力されるオブジェクトを作成する意味します

希望します。