Django 与 i18n 的反应

Question

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

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

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

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

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

Answer 1

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

\n

想一想，翻译与哪一部分相关？用户界面/用户体验对吗？

\n

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

\n

步骤：安装i18next进行react：

\n

npm install react-i18next@legacy i18next --save\n\n

\n

请注意，您不会获得 > v9，但本教程：\n https://react.i18next.com/legacy-v9/step-by-step-guide

\n

仍然有效，

\n

第 1 步：\n在 src 文件夹中创建翻译文件夹，如下所示：

\n

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

\n

我这样做的方式是手动确保令人惊叹的用户体验。\n此代码会将任何关键字从英语-英语转换为任何语言：\ndata_pre.py

\n

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

\n

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

\n

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

\n

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

\n

export const TRANSLATIONS_AR = {\n  \'Hello\': \'\xd9\x85\xd8\xb1\xd8\xad\xd8\xa8\xd8\xa7\',\n}\n\n

\n

跑步

\n

npm install --save i18next-browser-languagedetector\n

\n

i18n.js

\n

import i18n from "i18next";\nimport { initReactI18next } from "react-i18next";\nimport LanguageDetector from "i18next-browser-languagedetector";\nimport {TRANSLATIONS_AR } from "./ar/translationsAR";\nimport { TRANSLATIONS_EN } from "./en/translationsEN";\n\n// the translations\n// (tip move them in a JSON file and import them)\nconst resources = {\n  en: {\n    translation: TRANSLATIONS_EN\n  },\n  ar: {\n    translation: TRANSLATIONS_AR\n  },\n};\n\ni18n\n  .use(initReactI18next) \n  .use(LanguageDetector)\n  .init({\n    resources,\n    lng:[ "en", \'ar\'],\n\n    keySeparator: false, \n\n    interpolation: {\n      escapeValue: false \n    },\n    react: {\n      useSuspense: false\n    }\n  });\n\nexport default i18n;\n\n

\n

应用程序.js

\n

import React, { Component } from "react";\nimport { withTranslation } from \'react-i18next\';\nimport i18n from "./translations/i18n";\nclass App extends Component {\n    handleChangeLangToAR = () => {\n      i18n.changeLanguage("ar")\n  };\n\n  handleChangeLangToEN = () => {\n    i18n.changeLanguage("en")\n  };\n\n  render() {\n    return (\n        <SomeComponent\n              {...this.props}\n              handleChangeLangToAR={() => this.handleChangeLangToAR()}\n              handleChangeLangToEN={ () => this.handleChangeLangToEN()}\n              />\n  \n\n    );\n  }\n}\n\n\nexport default (withTranslation()(App));\n\n

\n

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

\n

一些组件.js

\n

import React from "react";\n\nclass someComponent extends React.Component {\n   render() {\n      const { handleChangeLangToEN, handleChangeLangToAR, t} = this.props;\n      return (\n         \n         <h1>{t(\'Hello\')}</h1>\n\n\n)\n}\n};\n\nexport default someComponent();\n

\n

handleChangeLangToEN：可以设置为 onClick 按钮以将站点语言切换为英语。

\n

handleChangeLangToAR ：可以设置为 onClick 按钮将站点语言切换为阿拉伯语。

\n

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

\n

例如：

\n

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

\n

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

\n

anotherComponent.js

\n

import React from "react";\nimport { withTranslation } from \'react-i18next\';\nclass anotherComponent extends React.Component {\n   render() {\n      const {t} = this.props;\n      return (\n         \n         <h1>{t(\'Hello\')}</h1>\n\n\n)\n}\n};\nexport default (withTransilation()anotherComponent)\n

\n

如果你使用 redux store 连接你的 props 并且仍然想使用 withTransilation()，不要感到困惑，你可以这样做。

\n

\nconst mapStateToProps = state => {\n  return {\n    isAuthenticated: state.auth.token !== null\n  };\n};\n\nconst mapDispatchToProps = dispatch => {\n  return {\n    onTryAutoSignup: () => dispatch(actions.authCheckState())\n  };\n};\n\nexport default connect(\n  mapStateToProps,\n  mapDispatchToProps,\n)(withTranslation()(App));\n\n\'\'\'\n

\n