覆盖 antd 组件里面的 text resource

[hasakilol]

比如 pro-table 里面默认有

pagination: {
    total: {
      range: ' ',
      total: 'of',
      item: 'items',
    },
  }

（在pro-components那个repo里面，具体在locale/en_US.tsx文件里面）。

现在我想要覆盖这些text resource. 所以我在自己的项目里面写了覆盖的内容：

pagination: {
    total: {
      range: ' ',
      total: 'in',
      item: 'products',
    },
  }

(在我项目的src/locales/en_US.ts里面)。 但是没有生效。有什么思路吗？

umi: umi 4.0.89

[fz6m]

我看了下 pro components 的源码，看样子 pro components 是根据 antd 当前的语言自动切换语言的，但想要自己修改里面的文本就没那么容易了，想了一种 hack 的方法可以和 umi 结合起来：

// src/app.ts

import { intlMap } from '@ant-design/pro-components'
import { getLocale, getIntl } from '@umijs/max';
import { get } from 'lodash'

export const antd = (memo: any) => {

  const locale: any = getLocale()
  const intl = getIntl()
  // @ts-expect-error
  const proIntl = intlMap[locale]
  const originGetMessage = proIntl.getMessage
  proIntl.getMessage = (id: string, defaultMessage: string) => {
    if (id?.length) {
      const valuePath = `procomponents.${id}`
      const i18nText = get(intl.messages || {}, valuePath)
      if (i18nText?.length) {
        return i18nText
      }
    }
    return originGetMessage(id, defaultMessage)
  }

  return memo
}

之后在每个 locales/*.ts 多语言文本里的 procomponents 项下修改就行了：

// src/locales/zh-CN.ts

export default {
  procomponents: {
    pagination: {
      total: {
        range: 'sss',
        total: 'ccc',
        item: 'ddd',
      },
    }
  }
};

关于为什么这么 hack 的，自己看下源码吧：https://github.com/ant-design/pro-components/blob/master/packages/provider/src/index.tsx

[hasakilol]

谢谢。 我用了 ProProvider 来解决的。你的方法应该也是可以的。