How to use react-intl-universal - 10 common examples

async componentDidMount() {
    const { lang, saveUserData } = this.props
    console.info(`用户语言为: ${lang}`)
    // i18n 的黑魔法，不 await 阻塞会引起部分i18n文字为空白
    await intl.init({
      currentLocale: lang,
      locales,
    })
    this.setState({ i18nLoaded: true })
    getMyInfo().then(res => {
      saveUserData(res)
    })
  }
  render() {

loadLocales() {
    let currentLocale = intl.determineLocale({
      urlLocaleKey: "lang",
      cookieLocaleKey: "lang"
    });
    if (!_.find(SUPPOER_LOCALES, { value: currentLocale })) {
      currentLocale = "en-US";
    }

    http
      .get(`locales/${currentLocale}.json`)
      .then(res => {
        console.log("App locale data", res.data);
        // init method will load CLDR locale data according to currentLocale
        return intl.init({
          currentLocale,
          locales: {
            [currentLocale]: res.data

public loadLocales() {
    const lang = this.getLangs()
    
    intl.init({
      currentLocale: lang, // TODO: determine locale here
      locales,
      commonLocaleDataUrls: {
        en: '/en.js', // the file
        zh: '/zh.js' // the file
      }
    })
    .then(() => {
      // After loading CLDR locale data, start to render
	    this.setState({initDone: true});
    });
  }

import './theme/reset.less';
import 'bootstrap/dist/css/bootstrap.min.css';
import './theme/style.less';
import 'bootstrap/dist/js/bootstrap.bundle.min';

const locales = {};
epConfig.supportedLocales.forEach((locale) => {
  // eslint-disable-next-line import/no-dynamic-require, global-require
  const localeMessages = require(`./localization/${locale.value}.json`);
  // eslint-disable-next-line import/no-dynamic-require, global-require
  const debugMessages = require(`./localization/messages-${locale.value}.json`);
  locales[locale.value] = { ...localeMessages, ...debugMessages };
});

// localisation init
intl.init({
  currentLocale: UserPrefs.getSelectedLocaleValue(),
  locales,
})
  .then(() => {
    // EP Configs init
    init({
      config: epConfig,
      intl,
    })
      .then((componentsData) => {
        ReactDOM.render(
          ,
          document.getElementById('root'),
        );
        if ('serviceWorker' in navigator) {
          navigator.serviceWorker.register('/service-worker.js', { scope: '/' })

function loadLocales() {
        let targetLocale = intl.determineLocale({ cookieLocaleKey: COOKIE_KEYS.LANG }) as LOCALES_KEYS
        // default is English
        if (!find(SUPPOER_LOCALES, { value: targetLocale })) {
            targetLocale = LOCALES_KEYS.EN_US
        }
        getLocaleLoader(targetLocale).then(res => {
            intl.init({ currentLocale: targetLocale, locales: { [targetLocale]: res.localeData } }).then(() => {
                setCurrentLocale(targetLocale)
                setAntdLocaleData(res.antdLocaleData)
            })
        })
    }

export const formatDate = (formatTemplate: string) => (date: DateDTO) => {
  if (!date) {
    return '-'
  }
  const localeKey = intl.getInitOptions().currentLocale!

  return formatToTimeZone(date, formatTemplate, {
    // No type interface..(https://github.com/prantlf/date-fns-timezone/issues/10)
    locale: locales[localeKey],
    timeZone: 'Asia/Seoul'
  })
}

export function setLocale(value) {
  console.log('locales:',value);
  switch (value) {
    case "zh-CN" :
      moment.locale('zh-cn');
      break;
    case "en-US":
      moment.locale('en');
      break;
    default:
      moment.locale('en');
  }

  intl.init({
    currentLocale: value || 'en-US',
    locales,
  });
  console.log('locales:',intl);
  window.locale = value || 'en-US'
}

function ListTokenTickers(props) {
  const {tickersOfSource:list,dispatch,token,tickers} = props;
  const tickersFm = new TickersFm(list);
  const listedTickers = tickersFm.getTickersBySymbol(token);
  const gotoTrade = (item)=>{
    routeActions.gotoPath(`/trade/${item.market}`)
  }
  console.log('ListTokenTickers',tickers);
  console.log('listedTickers',listedTickers);
  return (
    <div>
        <div>
            <div>
                <h4>{intl.get('ticker_list.title_loopring_tickers')}</h4>
            </div>
            
              <div style="{{minHeight:'65px'}}">
                  {
                    listedTickers.map((item,index)=&gt;{
                      const tickerFm = new TickerFm(item)
                      return (
                        <div>
                            <ul>
                                <li><h3>{item.market}</h3></li>
                                <li><small>{intl.get('ticker.price')}</small><span>{tickerFm.getLast()}</span></li>
                                <li><small>{intl.get('ticker.change')}</small><span>{tickerFm.getChange()}</span></li>
                            </ul>
                            <button>{intl.get('common.trade')} {token}</button>
                        </div>
                      )</div></div></div>

loadLocales(locale = this.state.locale) {
    intl.init({
      currentLocale: locale, 
      locales,
    })
    .then(() => {
      this.setState({ locale,  initDone: true });
      this.loadMenu();
    });
  }

getLocaleLoader(targetLocale).then(res => {
            intl.init({ currentLocale: targetLocale, locales: { [targetLocale]: res.localeData } }).then(() => {
                setCurrentLocale(targetLocale)
                setAntdLocaleData(res.antdLocaleData)
            })
        })
    }