React国际化——多语言切换

1.安装react-intl-universal:npm install react-intl-universal --save

2.配置语言包,json文件根据需要支持几种语言决定(将新建的语言包json文件放置于项目根目录的./public/locales下):

         

 

 3.引入react-intl-universal:import intl from "react-intl-universal";

           引入axios:import axios from 'axios';

 4.核心代码:

  const SUPPOER_LOCALES = [
  {
    name: "中文",
    value: "zh-CN"
  },
  {
    name: "English",
    value: "en-US"
  },
];

class App extends React.Component {

state = {
    initDone: false,
    language: "zh-CN",
  }

  componentDidMount() {
    this.loadLocales(this.state.language);
  }
 loadLocales(val) {
    let currentLocale = val
    axios.get(`locales/${currentLocale}.json`)
      .then(res => {
        console.log("App locale data", res.data);
        // Init方法将根据当前的本地数据加载本地数据
        return intl.init({
          currentLocale,
          locales: {
            [currentLocale]: res.data
          }
        });
      })
      .then(() => {
        // 在加载locale数据后,开始呈现
        this.setState({ initDone: true });
      });
  }

}

        

 

你可能感兴趣的:(React,国际化,语言切换)