js

Question

私は1つの方法でコードを単純化しようとしましたが、この場合重複するコードを避ける方法を試しています。 2つの方法がなくても、1つを実装してループする方法。リファクタリング

const residentsConfigurations = configurations.filter(({alarmType}) => alarmType === alarmTypes.Care || alarmType === alarmTypes.Wandering) 

     const staffConfigurations = configurations.filter(({alarmType}) => alarmType === alarmTypes.Assistance || alarmType === alarmTypes.Panic) 

{currentTab === 0 && 
          residentsConfigurations.map((configuration, index) => 
           <Grid key={index} item xs={12} lg={6}> 
            <Item 
             key={configuration.alarmType} 
             configuration={configuration} 
             changeBehavior={this.changeBehavior} 
             changeConfiguration={this.changeConfiguration} 
            /> 
           </Grid> 
          )} 
          {currentTab === 1 && 
           staffConfigurations.map((configuration, index) => 
            <Grid key={index} item xs={12} lg={6}> 
             <Item 
              key={configuration.alarmType} 
              configuration={configuration} 
              changeBehavior={this.changeBehavior} 
              changeConfiguration={this.changeConfiguration} 
             /> 
            </Grid> 
           )} 

Answer 1

：私はより柔軟なバリエーションを見つける

const newConfig = configurations.filter(({ alarmType }) => 
    currentTab === 1 
    ? alarmType === alarmTypes.Assistance || alarmType === alarmTypes.Panic 
    : alarmType === alarmTypes.Care || alarmType === alarmTypes.Wandering; 
); 

{ 
    newConfig.map((configuration, index) => (
     <Grid key={index} item xs={12} lg={6}> 
     <Item 
      key={configuration.alarmType} 
      configuration={configuration} 
      changeBehavior={this.changeBehavior} 
      changeConfiguration={this.changeConfiguration} 
     /> 
     </Grid> 
    )); 
} 

Answer 2

getConfigGrid(configurations) { 
    return (
    configurations.map((configuration, index) => (
     <Grid key={index} item xs={12} lg={6}> 
      <Item 
       key={configuration.alarmType} 
       configuration={configuration} 
       changeBehavior={this.changeBehavior} 
       changeConfiguration={this.changeConfiguration} 
      /> 
     </Grid> 
    ) 
); 
} 

const residentsConfigurations = configurations.filter(({alarmType}) => alarmType === alarmTypes.Care || alarmType === alarmTypes.Wandering) 
const staffConfigurations = configurations.filter(({alarmType}) => alarmType === alarmTypes.Assistance || alarmType === alarmTypes.Panic) 

{currentTab === 0 && this.getConfigGrid(residentsConfigurations)} 
{currentTab === 1 && this.getConfigGrid(staffConfigurations)} 

Answer 3

を私たちが望むならば、我々はより多くのタブや設定を追加することができます。

const tabsConfigurations = { 
    '0': [alarmTypes.Care, alarmTypes.Wandering], 
    '1': [alarmTypes.Assistance, alarmTypes.Panic], 
} 

let types = tabsConfigurations[currentTab] 

{configurations.filter(({alarmType}) => types.includes(alarmType)).map((configuration, index) => 
           <Grid key={index} item xs={12} lg={6}> 
            <Item 
             key={configuration.alarmType} 
             configuration={configuration} 
             changeBehavior={this.changeBehavior} 
             changeConfiguration={this.changeConfiguration} 
            /> 
           </Grid> 
          )}