• 组件库的国际化 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>