升级react-i18next后，Trans组件嵌套<b>标签插值触发Intellisense错误怎么办？

针对升级react-i18next后，<Trans>组件内嵌套<b>标签使用变量出现的Intellisense类型错误，以下是几种可行的解决办法：

方法1：使用values prop传递变量 #

新版本react-i18next的类型定义更严格，直接在子元素标签内写对象会被识别为不符合ReactNode类型要求。通过Trans组件的values prop统一传递变量，标签内仅保留占位符，即可通过类型检查：

import { Trans } from 'react-i18next';

<Trans i18nKey="myComponent.notify" values={{ name }}>
  Notification sent to <b>{{ name }}'s</b>
</Trans>

对应的翻译文案示例（如en.json）：

{
  "myComponent": {
    "notify": "Notification sent to <0>{{name}}'s</0>"
  }
}

方法2：直接在标签内传入变量 #

调整写法，直接将变量作为React元素的子节点传入，配合翻译文案中的标签占位符，既符合类型规范又能正常渲染：

import { Trans } from 'react-i18next';

<Trans i18nKey="myComponent.notify">
  Notification sent to <b>{name}'s</b>
</Trans>

对应的翻译文案需要保持标签占位符与组件内的嵌套标签对应：

{
  "myComponent": {
    "notify": "Notification sent to <0>{{name}}'s</0>"
  }
}

方法3：类型断言（不推荐） #

如果暂时不想调整代码结构，可以通过类型断言绕过类型检查，但这只是临时方案，不推荐长期使用：

import { Trans } from 'react-i18next';

<Trans i18nKey="myComponent.notify">
  Notification sent to <b>{{ name: name } as unknown as ReactNode}'s</b>
</Trans>

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