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 });
      });
  }

}