Lingui i18n传入NextLink等React Node显示[object Object]如何解决

渲染出[object Object]是两个写法错误共同导致的：

• 你给link插值赋值时，用模板字符串包裹了<NextLink>组件。JS中React元素是对象类型，放进模板字符串时会被强制转成字符串，最终输出[object Object]。
• 普通的i18n._方法默认返回纯字符串结果，本身不支持解析嵌入的React节点，哪怕去掉模板字符串直接传组件，也没法正确渲染。

Lingui 官方提供的<Trans>宏就是专门处理内嵌组件、富文本国际化场景的，完全支持把链接等React元素放在译文任意位置，自动适配不同语言的语序调整，不需要手动拆分文案。

推荐写法（使用Trans宏） #

直接在组件里写带NextLink的原文，Lingui会自动提取文案、生成带索引标记的翻译条目：

import { Trans } from '@lingui/macro';
import NextLink from 'next/link';

// 业务代码里直接写
<Trans id="key_to_translated_text">
  By registering, you agree to our 
  <NextLink href={routerCatalog.terms} target="_blank" rel="noopener noreferrer">
    <Trans id="key_to_link_text">Terms of Service</Trans>
  </NextLink>
</Trans>

翻译文件（po文件）里的对应条目用数字标签标记组件位置即可，数字对应<Trans>内嵌套组件的顺序索引，从0开始计数：

msgid "key_to_translated_text"
msgstr "注册即表示您同意我们的<0>服务条款</0>"

如果是德语等需要把链接放句子中间的语言，直接调整<0>标签在译文中的位置就行，Lingui会自动把NextLink组件渲染到对应位置，不会出现语序错乱。

特殊场景写法（必须用i18n._时） #

如果你的场景不适合直接写JSX结构，可以用@lingui/react导出的带React渲染能力的i18n实例，传入components映射：

import { useLingui } from '@lingui/react';
import NextLink from 'next/link';

function RegisterTip() {
  const { i18n } = useLingui();
  return (
    <div>
      {i18n._(
        'key_to_translated_text',
        { linkText: i18n._('key_to_link_text') },
        {
          components: {
            termsLink: <NextLink href={routerCatalog.terms} target="_blank" rel="noopener noreferrer" />
          }
        }
      )}
    </div>
  )
}

对应po文件里用自定义的组件名标签标记位置：

msgid "key_to_translated_text"
msgstr "By registering, you agree to our <termsLink>{linkText}</termsLink>"

注意：不要用模板字符串包裹React组件传值，所有需要嵌入译文的React节点，要么直接写在<Trans>标签内部，要么通过components参数传入，不要放在普通插值对象里。

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