LocaleProvider动态切换confirm组件使用场景的语言

在使用LocaleProvider的时候

  1. // 单例单独存储Modal语言配置
  2. let runtimeLocale: ModalLocale = {
  3.   ...(defaultLocale.Modal as ModalLocale),
  4. };
  1. // 构造函数切换modal语言配置
  2. constructor() {
  3.     changeConfirmLocale(props.locale && props.locale.Modal);
  4. }
  6. // 组件更新切换modal语言配置
  7.  componentDidUpdate(prevProps: LocaleProviderProps) {
  8.     const { locale } = this.props;
  9.     if (prevProps.locale !== locale) {
  10.       changeConfirmLocale(locale && locale.Modal);
  11.     }
  12.   }
  14. // 组件卸载切换modal语言配置
  15. componentWillUnmount() {
  16.     changeConfirmLocale();
  17.   }

也就是在主组件 LocalProvider管理语言切换 监听到主组件中语言切换了之后，更新modal的语言包

LocaleProvider提供动态语言包，LocalReceiver消费语言，充当Consumer

local格式定义，创建context

  1. // Locale
  2. export interface Locale {
  3.   locale: string;
  4.   Pagination?: PaginationLocale;
  5.   Text?: {
  6.     edit?: any;
  7.     copy?: any;
  8.   };
  9.   Form?: {
  10.     defaultValidateMessages: ValidateMessages;
  11.   };
  12.   ...
  13. }
  15. // Context   
  16. // Partial  使全属性可选  给每个属性都加上问号可选 xxx?: XXX
  17. const LocaleContext = createContext<(Partial<Locale> & { exist?: boolean }) | undefined>(undefined);