React hooks条件渲染

Question

Antd的表格需要传入一个columns，我想做一个带tab切换的表格，tab切换后表格的列也会变化。所以，写出了以下代码

const myColumns = (key: string) => {
        switch (key) {
            case WithTabType.cash:
                return useCashTableColumns(t);
            case WithTabType.deposit:
                return useDepositTableColumns(t);
            case WithTabType.withdraw:
                return useWithdrawTableColumns(withdrawStatus.store, t);
            case WithTabType.rebate:
                return useRebateTableColumns(t);
            case WithTabType.loginLog:
                return useIPTableColumns(t);
        }
    };

这是columns的代码

export const useCashTableColumns = (listStore: ViewListStore<{ key: number; value: string }>,
    t: (value: string) => string): ProColumns<CashModel>[] => {
    return [
        {
            title: `${t('finance.withdraw.details.table.cashID')}`,
            dataIndex: 'cashID',
            width: 200,
            align: 'center',
        },
    ]
}

我无法在columns中使用useContext，无法使用react-i18next中的useTranslation，以及其他hook。所以以参数的方式将hooks传入columns，但只有两个hook也还好，如果使用到更多的hook就太臃肿了。
React Hooks规则我理解。有没有其他写法，既可以满足我条件渲染的需求，也能比当前写法简洁？

version：React 17.0.0，Antd 4.19.3

Answer 1

可以不打破hooks的规则共享一下变量即可，可以用下面的代码在每次useContext后putContext然后在其他地方readContext即可

/**
 * 根据你的业务设置一个合适大小的context共享区，就你的使用场景来说完全可以使用一个很小
 * 的的很小LRUCache,就能符合需求
 */
const N = 20
/**
 * 在这里也可以使用Map不过，里面不在使用的context就得自己清理了
 */
const contextKeyToContext = new LRU<string, unknown>(N)

const putContext = (key: string, context: unknown) => {
  contextKeyToContext.put(key, context)
}

const readContext = <T,>(key: string) => {
  return contextKeyToContext.get(key) as T | null
}