Django 与 i18n 的 react

Question

想知道在需要 i18n 时将 django 与 React 结合使用的最佳实践是什么。

目前我正在全局范围内加载 javascript_catalog。
所有翻译由 django i18n 控制。

从 react 组件我使用 gettext django javascript 目录功能来翻译所有必要的文本。

对于本地化，我还使用了 javascript_catalog 提供的 django i10n 支持。

任何人都有更好的做法，在 django 和 react 中使用 i18n

Answer 1

我并不声称这是最佳实践，但它对我有用。将前端和后端分开一点。
想一想，翻译跟什么部分有关？用户界面/用户体验对吗？
因此，为什么要把它放在后端，为什么不把它放在你的 react 项目中？
步骤:安装 i18next 进行 react :

npm install react-i18next@legacy i18next --save

请注意，您不会获得 > v9 而是本教程:
https://react.i18next.com/legacy-v9/step-by-step-guide
仍然有效，
第1步:
在 src 文件夹中创建翻译文件夹，如下所示:

 -src
    -translations
      -ar
        transilationsAR.js
      -en 
        transilationEN.js
      - i18n.js
   - App.js

我这样做的方式是手动确保出色的用户体验。
此代码会将任何关键字从 ENGLISH-ENGLISH 转换为任何语言:
data_pre.py

en_en= {"kw": "kw"}
en_kw = []
for kw in en_en:
    en_kw.append(kw)
# translate the list of english kw to desired language via google translate
ar_kw = """ [en_to_desired_langauge] """
ar_kw = ar_kw.replace("،", ",")
ar_kw = eval(ar_kw)
en_ar = dict()
for i in range(0, len(ar_kw)):
    en_ar[en_kw[i]] = ar_kw[i]
# en_ar key words are in en_ar variable.

transilationEN.js :这里我们将有例如 ENGLISH-ENGLISH 关键字字典，
有一些工具可以帮助您从您的网站获取所有关键词、短语。

export const TRANSLATIONS_EN = {
  'Hello': 'Hello',
}

transilationAR.js，这里我们有了新的数据预处理字典。

export const TRANSLATIONS_AR = {
  'Hello': 'مرحبا',
}

跑

npm install --save i18next-browser-languagedetector

i18n.js

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import {TRANSLATIONS_AR } from "./ar/translationsAR";
import { TRANSLATIONS_EN } from "./en/translationsEN";

// the translations
// (tip move them in a JSON file and import them)
const resources = {
  en: {
    translation: TRANSLATIONS_EN
  },
  ar: {
    translation: TRANSLATIONS_AR
  },
};

i18n
  .use(initReactI18next) 
  .use(LanguageDetector)
  .init({
    resources,
    lng:[ "en", 'ar'],

    keySeparator: false, 

    interpolation: {
      escapeValue: false 
    },
    react: {
      useSuspense: false
    }
  });

export default i18n;

应用程序.js

import React, { Component } from "react";
import { withTranslation } from 'react-i18next';
import i18n from "./translations/i18n";
class App extends Component {
    handleChangeLangToAR = () => {
      i18n.changeLanguage("ar")
  };

  handleChangeLangToEN = () => {
    i18n.changeLanguage("en")
  };

  render() {
    return (
        <SomeComponent
              {...this.props}
              handleChangeLangToAR={() => this.handleChangeLangToAR()}
              handleChangeLangToEN={ () => this.handleChangeLangToEN()}
              />
  

    );
  }
}


export default (withTranslation()(App));

现在在 someComponent.js 中，我们可以通过 props 访问 t()，它可用于翻译我们网站上的任何关键字、短语。
someComponent.js

import React from "react";

class someComponent extends React.Component {
   render() {
      const { handleChangeLangToEN, handleChangeLangToAR, t} = this.props;
      return (
         
         <h1>{t('Hello')}</h1>


)
}
};

export default someComponent();

handleChangeLangToEN:可以设置为onClick按钮切换网站语言为英文。
handleChangeLangToAR : 可以设置为 onClick a button 将网站语言切换为阿拉伯语。
两者都应该在布局组件中，因此我们不必在项目中的每个地方都传递它们。
例如:

<Button OnClick={ () => handleChangeLangToEN }> English </Button>

或者，如果我们有另一个要翻译的组件，只需使用 WithTranslation 导出组件，然后我们就可以访问 t():
另一个组件.js

import React from "react";
import { withTranslation } from 'react-i18next';
class anotherComponent extends React.Component {
   render() {
      const {t} = this.props;
      return (
         
         <h1>{t('Hello')}</h1>


)
}
};
export default (withTransilation()anotherComponent)

如果你使用 redux store 连接你的 props 并且仍然想使用 withTransilation()，不要混淆，你这样做。

const mapStateToProps = state => {
  return {
    isAuthenticated: state.auth.token !== null
  };
};

const mapDispatchToProps = dispatch => {
  return {
    onTryAutoSignup: () => dispatch(actions.authCheckState())
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(withTranslation()(App));

'''