React中如何根据接收的props动态选择对应selector执行map遍历

核心思路是通过配置映射表+抽离公共渲染逻辑消除重复代码，全程不需要条件判断/switch语句，后续扩展也更方便。

步骤1：构建数据源映射表 #

将dataSet取值、对应selector、过滤匹配的数值统一存在映射对象中，后续直接按key取值即可：

// 映射表配置，新增类型仅需要在此添加条目
const dataSourceMap = {
  "1": { selector: selectDataOne, matchValue: 1 },
  "2": { selector: selectDataTwo, matchValue: 2 },
  "3": { selector: selectDataThree, matchValue: 3 },
  "4": { selector: selectDataFour, matchValue: 4 },
}

注意：你原示例代码中dataThree、dataFour都调用了selectDataTwo属于笔误，此处记得替换为正确的selector。

步骤2：统一获取当前生效的数据源 #

不需要单独声明4个data变量，直接根据传入的dataSet取对应数据即可，同时添加非法值兜底逻辑：

const [dataSet] = useState(route.params.dataSet);
// 非法值默认兜底为第一套配置，可根据业务调整
const currentConfig = dataSourceMap[dataSet] ?? dataSourceMap["1"];
const currentData = useSelector(currentConfig.selector);
const matchValue = currentConfig.matchValue;

步骤3：抽离公共列表渲染逻辑 #

所有case下的map渲染逻辑完全一致，抽成公共函数复用即可：

const renderCardList = (data: any[], matchVal: number) => {
  return data.map((c: any, i: number) => {
    const card = c.dataSet === matchVal && <Card key={i} data={c} isOperating={c.isOperating} />;
    if (i === data.length - 1) {
      return (
        <View key={i} style={styles.lastMargin}>
          <Card key={i} data={c} isOperating={c.isOperating} />
        </View>
      );
    }
    return card;
  })
}

最终使用 #

需要渲染列表的位置直接调用函数即可：

{renderCardList(currentData, matchValue)}

额外优化建议 #

• 将代码中的any类型替换为你实际的Card数据类型，保障TypeScript类型安全
• 如果Card组件的key可以用数据的唯一ID（比如c.id）代替索引i，渲染性能会更好
• 若后续过滤规则有差异化，可直接在映射表中新增filter字段配置，不需要修改渲染逻辑

内容的提问来源于stack exchange，提问作者MrVoland