React18升级后i18next元素内变量失效，如何设置allowObjectInHTMLChildren？

问题原因 #

React18对组件children的类型校验更加严格，而react-i18next默认禁止在HTML元素的子节点中传入对象类型的值。你的errors.username?.message是FieldError对象（而非纯字符串），因此触发了类型不匹配的错误。

解决方案 #

allowObjectInHTMLChildren是react-i18next的专属配置，不在i18next的全局init方法根层级，而是需要放在react配置项中，有两种设置方式：

1. 全局配置（推荐） #

在初始化i18next时，通过initReactI18next插件的配置开启：

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

i18n
  .use(initReactI18next)
  .init({
    // 你的其他i18n配置（比如资源、语言等）
    react: {
      allowObjectInHTMLChildren: true // 在这里设置该选项
    }
  });

2. 局部配置（按需开启） #

如果不想全局启用，也可以在单个Trans组件中单独设置该属性（若你的代码实际使用了Trans包裹）：

import { Trans } from 'react-i18next';

// ...
<Field>
  <Trans allowObjectInHTMLChildren>
    <label className="p-error">{errors.username?.message}</label>
  </Trans>
</Field>

补充说明 #

开启该选项后，react-i18next会允许对象类型作为HTML元素的子节点，从而绕过当前的类型校验错误。如果你的errors.username?.message最终会被渲染为字符串（比如通过i18next的翻译解析），这个设置是安全的。

内容的提问来源于stack exchange，提问作者user17145524