react 国际化

组件库的国际化 import { ConfigProvider } from 'antd' // 引入语言包 import zhCN from 'antd/lib/locale/zh_CN'; import enUS from 'antd/lib/locale/en_US';

const langs:any = {
  'zh-CN':zhCN,
  'en-US':enUS
}

// 注入
<ConfigProvider locale={langs[lang]}>
	<System />
</ConfigProvider>

react-intl 国际化配置 import zhCNi from '@/lang/zhCNi' import enUSi from '@/lang/enUSi'

// 定义语言包
const langsi:any = {
  'zh-CN':zhCNi,
  'en-US':enUSi
}

//注入 locale ：当前语言 messages：语言包
<IntlProvider locale={ lang } messages={langsi[lang]}> 
   <ConfigProvider locale={langs[lang]}>
        <System />
   </ConfigProvider>
</IntlProvider>

// 使用FormattedMessage api 指定语言id
<div><FormattedMessage id='article.title'></FormattedMessage></div>
    

自定义上下文 实现 import React, { PureComponent, useContext } from 'react'

// 创建上下文
const LangContext = React.createContext(null)
const LangProvider = LangContext.Provider
const LangConsumer = LangContext.Consumer

function injectLang(C:any) {
    return class extends PureComponent {
      render() {
        return (
          // 消费
          <LangConsumer>
          {
            lang => (
              <C {...this.props} lang={lang} />
            )
          }
          </LangConsumer>
        )
      }
    }
  }

function useLang() {
    const lang = useContext(LangContext)
    return lang
}

export {
    LangProvider,
    injectLang,
    useLang
}

// 提供消费
const langsi:any = {
  'zh-CN':zhCNi,
  'en-US':enUSi
}

 <LangProvider value={langsi[lang]}>
     <System />
 </LangProvider>


// 使用
const lang:any = useLang()

console.log('自定义国际化的lang----', lang);

<div>{lang['article.title']}</div>