Question

我尝试在一种方法中简化代码，在这种情况下如何避免重复代码。没有两种方法，如何实现和循环一个。

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

简化过滤器js

3 个答案: