Question

想知道当需要i18n时，将django与React一起使用的最佳做法是什么。

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

来自反应组件我使用gettext django javascript目录函数来翻译所有必要的文本。

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

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

Answer 1

我不认为这是最佳实践，但它对我有用。将前端和后端分开一点。

想一想，翻译跟什么部分有关？用户界面/用户体验对吗？

因此，为什么要把它放在后端，为什么不把它放在你的 React 项目中？

步骤：安装 i18next for 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;

App.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 on a button 将网站语言切换为英语。

handleChangeLangToAR : 可以设置为 onClick a button 将网站语言切换为阿拉伯语。

两者都应该在布局组件中，因此我们不必在项目中的每个地方都传递它们。

例如：

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

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

anotherComponent.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));

'''

Django与i18n反应

1 个答案: