我正在致力于将I18Next集成到一个Reaction项目中,使用REACT-18NEXT,并使用I18Next-parser生成带有当前翻译字符串的JSON文件,并使用自然语言键.

在我的源代码中,我有一些类似的东西:

<p>{t('{{count}} Sensors', { count: getSensorCount() })}</p>

其中getSensorCount()返回一个数字.

我的i18next-parser配置如下:

{
  locales: ['en', 'fr', 'es'],
  output: 'src/locales/$LOCALE/$NAMESPACE.json',
  defaultValue: (locale, namespace, key, value) => value || key,
  keySeparator: false,
  namespaceSeparator: false,
  verbose: true,
  createOldCatalogs: false
}

运行解析器将生成一个带有如下键的JSON文件:

{
...
  "{{count}} Sensors_one": "{{count}} Sensors",
  "{{count}} Sensors_other": "{{count}} Sensors",
...
}

然后我将Sensors_One的值更改为{{count}} Sensor.

count为1时,我希望返回"1传感器".这也是i18next文档描述复数的工作方式.

然而,它只是返回密钥,似乎无法在JSON文件中找到翻译.

要让它返回正确的值,唯一的方法是像这样更改密钥:

  "{{count}} Sensors": "{{count}} Sensor",
  "{{count}} Sensors_plural": "{{count}} Sensors",

我想知道复数键的正确语法是什么,以及

如果是key_onekey_other,我如何让我的项目认识到这一点

如果是keykey_plural,我将如何获得我的i18next-parser配置以使用正确的键生成JSON文件.

我的包版本如下:

"i18next": "^20.6.1",
"i18next-parser": "^8.0.0",
"react-i18next": "^13.0.0",
"react": "^18.2.0",

谢谢.

编辑:Codesandbox示例: https://codesandbox.io/s/react-i18next-forked-l5t9ws?file=/src/app.js

推荐答案

在i18Next的version 21.0.0中,他们改变了在json文件中写入复数的方式.在21岁之前,就像在你的Sandbox 里一样,正确的方式是"foo_复数".21岁以后,就是"Foo_Other".进行这一更改是为了使用与使用的术语相同的术语.

显然,您使用的是新版本的i18Next-parser,但使用的是旧版本的i18Next.

  1. 切换到新版本的i18Next
  2. 切换到旧版本的i18next-parser(我不确定具体是什么版本)
  3. option传递给i18next-parser,告诉它以旧方式解析复数:
{
  i18nextOptions: {
    compatibilityJSON: 'v3'
  }
}

Reactjs相关问答推荐

LocalStore未存储正确的数据

Reaction路由的问题-在Effect使用API调用响应设置状态之前呈现页面

两条react 路由的行为不同.有没有人能解释一下,我已经找了好几天了

是否在Extra Reducer完成作业(job)时触发createListenerMiddleware?

React:关于useEffect钩子如何工作的困惑

如何在整个应用程序中显示通用弹出窗口中的点击事件

定位数组中的一项(React、useState)

将外部 JavaScript 导入 React(通过文件)

useEffect 渲染没有依赖数组的组件

React - 错误边界未捕获错误

如何使用 React Hook Form 将寄存器作为 props 发送到子组件来收集数据?

Material UI:使用 mui 手风琴时出现props 类型失败:isValidElement 不是函数

SonarCloud 代码覆盖率不适用于 Github Action

如何使用 React Router 在 React 中正确同步 useEffect 和 useLocation 挂钩?

当我在其中传递 2 个箭头函数时,为什么我的 onClick 事件不适用于 useState

在表格中显示具有自定义声明的用户状态

如何在 Reactjs 中判断受保护路由上的用户角色?

交换键仍然引入了 fresh 的 DOM 元素

如何将本地视频文件上传到 Google Cloud

调用函数以获取数据并在数据到达时导航到链接