在 React 中切换语言而不使用外部库

Question

在不使用外部库的情况下，您可以建议哪些方法来更改 React 中的语言？我的方法是使用三元运算符{language === 'en'? 'title': 'titre'}。如果语言为en，则显示 ；title如果不是，则显示titre。还有什么方法可以推荐一下。例如，翻译应放置在单独的 json 文件中。

代码在这里： https: //stackblitz.com/edit/react-eu9myn

class App extends Component {
  constructor() {
    super();
    this.state = {
      language: 'en'
    };
  }

  changeLanguage = () => {
    this.setState({
      language:  'fr'
    })
  }

  render() {
    const {language} = this.state;
    return (
      <div>
        <p>
          {language === 'en' ? 'title' : 'titre'}
        </p>
        <button onClick={this.changeLanguage}>change language</button>
      </div>
    );
  }
}

Answer 1

国际化 ( i18n ) 是一个难题，有一些现有的标准解决方案是由专家翻译和语言学家设计的，旨在解决世界各地语言怪异的广度。即使您精通所有目标语言，您通常也不应该尝试提出自己的解决方案。

\n\n

这并不意味着您需要一个库（您可以自己实现这些标准之一），但内联编写 i18n 逻辑将无法扩展，并且可能无法正常工作。

\n\n

i18n 最简单的情况是，如果您正在翻译不依赖于上下文的字符串，并且是没有插值的完整句子。您可以使用一种非常基本的方法，例如使用一个大的翻译词典，然后查找其中的每个字符串。它看起来有点像你的三元，但至少它可以扩展到多种语言，并且在没有库的情况下做到这一点是合理的：

\n\n

l10n = {\n    \'title\': {en: \'title\', fr: \'titre\'}\n}\n\n<p>\n    {l10n[\'title\'][lang]}\n</p>\n

\n\n

但是，如果您的网站/应用程序/其他内容中需要字符串插值，请考虑一个实现ICU等的库。

\n\n

现在，让我告诉你为什么这是一个坏主意。假设您有字符串“you can see (n)rocks”，您想要将 (n) 替换为实际数字，并且您希望句子在语法上正确，因此需要计算数字一致性，对吧？所以，“0rocks”，“1rock”，“2+rocks”\xe2\x80\xa6 看起来英语复数只是添加一个“s”（不是真的，但我们现在假设），你可以用三元组来实现它。我看到您在示例中使用了法语，那么怎么样？“0 卡尤”、“1 卡尤”、“2+ 卡尤”。是的，法语中有多种复数形式。您如何编写代码来解决这个问题？如果您需要德语翻译怎么办？也许译者会决定宾语应该放在句子的前面，而不是最后。您的代码如何处理基于语言的词序？

\n\n

所有这些问题都应该委托给翻译人员，翻译人员将它们编码成 ICU 字符串，然后通过给定上下文的某些代码对其进行评估，以获得正确的翻译。无论您使用库还是自己实现它，您最终想要的是一些函数 \xe2\x80\x94 让我们称它为localize(string, context)几乎独立于 React 的函数，并且您可以在组件中使用它，如下所示：

\n\n

import localize from \'./somewhere\'\n\n<p>\n    {localize(\'title\')}\n</p>\n

\n\n

如果你真的愿意，你可以将语言环境作为参数传递，并以某种方式将其存储在 React 的状态中。该库认为没有必要，因为真正的用户很少切换语言，并且在发生这种情况时重新加载整个应用程序是可以的。

\n