update: comment组件加载语言包优先级

package.json

@@ -20,6 +20,7 @@
     "prop-types": "^15.6.2",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
+    "react-intl-universal": "^1.15.2",
     "react-scripts": "1.1.4",
     "shortid": "^2.2.11"
   },

src/App.js

@@ -2,6 +2,7 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 import { message } from "antd";
 import axios from "axios";
+import intl from "react-intl-universal";
 import { ERROR_DEFAULT, LIMIT } from "./constant";
 import { CommentContext } from "./Comment";
 import { isFunction } from "./helper";
@@ -13,6 +14,20 @@ import lang from "./lang";
 import "./App.css";
 // import styles from "./App.module.css";
 
+/**
+ * 当前支持的语言
+ */
+const SUPPORT_LOCALES = [
+  {
+    name: "English",
+    value: "en-US"
+  },
+  {
+    name: "简体中文",
+    value: "zh-CN"
+  }
+];
+
 class App extends Component {
   constructor(props) {
     super(props);
@@ -27,7 +42,8 @@ class App extends Component {
       page: 1,
       total: 0,
       // 是否没有更多评论了
-      isNoMoreComment: false
+      isNoMoreComment: false,
+      initDone: false
     };
     this.handleChangeLoading = this.handleChangeLoading.bind(this);
     this.sCreateComment = this.sCreateComment.bind(this);
@@ -52,7 +68,41 @@ class App extends Component {
     }
   }
 
-  componentDidMount() {}
+  componentDidMount() {
+    this.loadLocales();
+  }
+
+  /**
+   * 加载语言包
+   * 只能根据url或者传入的props来确定加载哪个语言包
+   * 优先级：传入的props > url
+   */
+  loadLocales() {
+    let { currentLocale } = this.props;
+    if (!currentLocale) {
+      currentLocale = intl.determineLocale({
+        urlLocaleKey: "lang"
+      });
+    }
+    console.log("currentLocale", currentLocale);
+    currentLocale = SUPPORT_LOCALES.find(item => item.value === currentLocale)
+      ? currentLocale
+      : "zh-CN";
+    this.axios
+      .get(`locales/${currentLocale}.json`)
+      .then(res => {
+        console.log("App locale data", res.data);
+        return intl.init({
+          currentLocale,
+          locales: {
+            [currentLocale]: res.data
+          }
+        });
+      })
+      .then(() => {
+        this.setState({ initDone: true });
+      });
+  }
 
   error(msg, info = {}) {
     if (this.props.showError) {
@@ -410,18 +460,20 @@ class App extends Component {
     };
 
     return (
-      <CommentContext.Provider value={value}>
-        <div className="comment">
-          {this.props.showEditor && (
-            <CommentInput content={this.props.children} />
-          )}
-          {this.props.showList && (
-            <div style={{ marginTop: 20 }}>
-              <CommentList />
-            </div>
-          )}
-        </div>
-      </CommentContext.Provider>
+      this.state.initDone && (
+        <CommentContext.Provider value={value}>
+          <div className="comment">
+            {this.props.showEditor && (
+              <CommentInput content={this.props.children} />
+            )}
+            {this.props.showList && (
+              <div style={{ marginTop: 20 }}>
+                <CommentList />
+              </div>
+            )}
+          </div>
+        </CommentContext.Provider>
+      )
     );
   }
 }
@@ -440,7 +492,8 @@ App.propTypes = {
   userId: PropTypes.number, // 用户id, comment内部不维护用户id, 调用组件时传递过来, 目前用于判断是否显示删除按钮
   pageType: PropTypes.string, // 分页类型
   page: PropTypes.number, // 页码
-  onPageChange: PropTypes.func // 页码变化回调
+  onPageChange: PropTypes.func, // 页码变化回调
+  currentLocale: PropTypes.string //  传入的语言包
 };
 
 App.defaultProps = {

src/lang/en-US.json

@@ -0,0 +1,21 @@
+{
+  "editor.alreadyEntered": "已输入{count}/140字",
+  "editor.placeholder": "say...",
+  "editor.SubmitBtn": "Submit",
+  "editor.uploadTip": "上传图片",
+  "editor.uploadCount": "(您还能上传{count}张图片)",
+  "editor.uploadBtn": "upload",
+
+  "comment.totalComment": "共{total}条评论",
+  "comment.reply": "reply",
+  "comment.moreComment": "More",
+
+  "reply.totalReply": "{total}条回复",
+  "reply.moreReply": "More",
+  "reply.collapse": "收起回复",
+
+  "popConfirm.title": "Sure?",
+  "popConfirm.ok": "Ok",
+  "popConfirm.cancel": "Cancel",
+  "popConfirm.delete": "Delete"
+}

src/lang/zh-CN.json

@@ -0,0 +1,21 @@
+{
+  "editor.alreadyEntered": "已输入{count}/140字",
+  "editor.placeholder": "说点什么吧...",
+  "editor.SubmitBtn": "发表",
+  "editor.uploadTip": "上传图片",
+  "editor.uploadCount": "(您还能上传{count}张图片)",
+  "editor.uploadBtn": "上传",
+
+  "comment.totalComment": "共{total}条评论",
+  "comment.reply": "回复",
+  "comment.moreComment": "查看更多评论",
+
+  "reply.totalReply": "{total}条回复",
+  "reply.moreReply": "查看更多回复",
+  "reply.collapse": "收起回复",
+
+  "popConfirm.title": "确定要删除吗",
+  "popConfirm.ok": "确定",
+  "popConfirm.cancel": "取消",
+  "popConfirm.delete": "删除"
+}