Замена более простой и более короткий путь, чем switch-reactjs

Когда я знаю, что в переменной есть строка numpad, как я могу сделать простой компонент рендеринга с тем же именем? У меня есть компоненты Numpad, UnitList, ShiftList, и я хочу сделать их индивидуально. Я делаю обратный вызов в своем дочернем элементе, и я возвращаю тип компонента (string), который я хочу отобразить из моего родителя. Затем я устанавливаю свою переменную в numpad, unitList или shiftList, а затем я хочу отобразить этот компонент. Есть ли еще более простой способ, чем переключатель записи? С переключателем я могу просто -Замена более простой и более короткий путь, чем switch-reactjs

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

источник

2016-10-03 Lukáš Unzeitig

Думаю, вам стоит поделиться больше кода о том, что вы пытаетесь сделать. Это не так понятно. – cdagli

Хорошо, подождите: D –

Где вы устанавливаете 'this.state.type'? У ребенка, как вы используете 'rednerSomeComponent'? –

В общем, если вы хотите, чтобы избежать switch ... case, вы можете использовать JavaScript Object для обработки отображения , В вашем примере, это означает создать объект, ключи которого являются различные значения переменной и значения ожидаемый выход:

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

Надеюсь, что это поможет

источник

2016-10-03 18:04:07

Замена более простой и более короткий путь, чем switch-reactjs

ответ

Смежные вопросы