Question

许多展示如何使用 react-18next 将 i18n 添加到 React 应用程序的教程和文章，在组件中都有可翻译的字符串。为什么它看起来像是一个公认的约定，但这可能会导致代码重复，并被证明是足够大的代码库的维护噩梦。

react-js 生态系统中是否存在可以帮助人们更好地组织此类可翻译字符串的模式，请记住，它们应该对用户在浏览器上的运行时语言更改做出反应。
如果某些字符串必须在组件之外定义，例如虽然是人为的，那么该解决方案是否有效

// utils
export const lookup = {
  key1: {
    title: 'lorem Ipsum', // values should be translated
    description: 'a somehwat long description',
    severalOtherProps: 'and their values',
  },
  // ... several keys here.
  lastkey: {
    title: ' lorem Ipsum',
    description: 'a somehwat long description',
    severalOtherProps: 'and their values',
  },
};

// component1.tsx

export const component1 = () => {
  // consumes lookup
};

export const component2 = () => {
  // consumes lookup
}

Answer 1

我认为重新阅读更多i18n docs可能会受益：

特别是关于 namespacing 和 nesting 的翻译。所有翻译 key:value 对都定义在 react 组件的外部。您可以使用所提供的翻译函数，例如 React 组件中的 useTranslation。

如果您在组件之外有一个辅助函数，不幸的是，您必须将 t 作为参数传递给函数内使用。

使用 react-18next 在 react 组件外翻译字符串

1 个答案: