if判断过多，使用map，策略模式

问相逢何必曾相识

已于 2024-03-20 19:12:12 修改

阅读量94

点赞数 3

文章标签： react.js

于 2024-03-20 18:59:47 首次发布

本文链接：https://blog.csdn.net/WJLcomeon/article/details/136885811

版权

import React, { useState } from 'react';
enum TAB_KEY {
  APPLY = 'APPLY',
  REIM = 'REIM',
  DOWNLOAD_LIST = 'DOWNLOAD_LIST',
}
const Student = () => {
  const [activeKey, setActiveKey] = useState<string>('');
  const [exportKey, setExportKey] = useState<string[]>([]);

  const strategyMap = new Map<string, () => string[]>([
    [TAB_KEY.APPLY, () => ['BILL_APPLY']],
    [TAB_KEY.REIM, () => ['BILL_REIM']],
    [TAB_KEY.DOWNLOAD_LIST, () => [
      'HISTORY_BILL_APPLY',
      'HISTORY_BILL_REIM',
    ]],
  ]);

  const handleChangeTabs = (key: string) => {
    setActiveKey(key);
    const strategy = strategyMap.get(key);
    if (strategy) {
      setExportKey(strategy());
    }
  };

  return (
    <>
      {/* 这里放置组件内容 */}
    </>
  );
};

export default Student;

还有种写法，对象的形式

import React, { useState } from 'react';
enum TAB_KEY {
  APPLY = '_APPLY',
  REIM = 'REIM',
  DOWNLOAD_LIST = 'DOWNLOAD_LIST',
}

const Student = () => {
  const [activeKey, setActiveKey] = useState<string>('');
  const [exportKey, setExportKey] = useState<string[]>([]);
  //定义不同选项对应的策略对象
const strategies={
  APPLY:()=>['BILL_APPLY'],
  REIM:()=>['BILL_REIM'],
  DOWNLOAD_LIST:()=>['HISTORY_BILL_APPLY',
    'HISTORY_BILL_REIM']
}

  const handleChangeTabs = (key: string) => {
    setActiveKey(key);
    if (strategies[key]) {
      setExportKey(strategies[key]());
    }
  };

  return (
    <>
      {/* 这里放置组件内容 */}
    </>
  );
};

export default Student;