reactjs - Lingui：错误：对象作为 React 子对象无效（找到：带有键 {id} 的对象）

Question

根据文档，我们可以使用t宏而不是i18n._()调用。对应的宏变换示例：

import { t } from "@lingui/macro"
const message = t`Hello World`

// ↓ ↓ ↓ ↓ ↓ ↓

import { i18n } from "@lingui/core"
const message = i18n._(/*i18n*/{
  id: 'Hello World',
})

所以我应该能够写：

  <TextField label={t`Login`}/>

其中TextField是一个 Material UI 组件。

但这不起作用。相反，我得到一个运行时错误：

错误：对象作为 React 子对象无效（找到：带有键 {id} 的对象）。

好像t被转换为​​对象

{
  id: 'Login',
}

而不是i18n._(...)函数调用。

我在此处或项目页面中找不到有关此的任何信息。

Answer 1

回答我自己。

很难说出真正的原因，但在我根据Sergio Moreno 提供的沙箱更新代码后，它现在可以工作了。

基本上I18nProvider应该以不同的方式初始化。具体来说：

曾是：

<I18nProvider language={language} catalogs={i18nCatalogs}>

变成：

<I18nProvider i18n={i18n}>

有关更多详细信息，请参阅问题：https ://github.com/lingui/js-lingui/issues/946