我在 React 18 中遇到 i18next 问题

Question

我不能在标签内使用 i18n 中的 t （也不能在任何 html 标签内使用），而且我不明白为什么，如果我在 jsx 中的标签之外使用它，它可以正常工作并从我的 json 文件中获取翻译。

代码示例： <label htmlFor={"username"}>{t("Username")}</label>

我收到错误消息：类型“DefaultTFuncReturn”不可分配给类型“ReactI18NextChild |” 可迭代'。类型“object”不可分配给类型“ReactI18NextChild |” 可迭代'。

有没有人遇到过类似的问题，你知道如何解决吗？

Answer 1

我也在这里回答了这个问题，但也在这里分享。

我遇到了同样的问题，并在此处的官方文档中找到了解决方案。i18next 的t方法可以返回一个null值，但最近才反映在类型中。null需要防止返回。找到您的 i18n 配置，可能称为i18n.ts.

// i18n.ts
import 'i18next';

// declare custom type options so the return is always a string.

declare module 'i18next' {
  interface CustomTypeOptions {
    returnNull: false
  }
}

// update the initialization so the behavior matches the type:
i18next.init({
  returnNull: false,
  // ... any other initializations here
});