带有react-i18next的<Trans />组件中出现错误：渲染没有返回任何内容

Question

当我尝试使用

react-i18next

Trans

组件插入一些 React 组件时，出现以下错误：

未捕获错误：Trans(...)：渲染未返回任何内容。这通常意味着缺少返回语句。或者，若不渲染任何内容，请返回 null。

我像这样调用

Trans

组件：

<Trans
     t={l as TFunction}
     defaults="hello <chip>{{cohortName}}</chip> <bold>{{jobName}}</bold>"
     values={{
                cohortName,
                jobName,
     }}
     components={{
                chip: (
                  <Chip>
                    <></>
                  </Chip>
                ),
                bold: <strong />,
     }}
 />

我不明白为什么这是一个问题，因为根据 docs 这应该没问题。

我认为问题不在于

react-i18next

Trans 组件，但我不确定。有什么想法吗？

我尝试了另一种版本，其中使用模板作为

Trans

组件的返回值：

               <Trans
                  t={t}
                  defaults="hello <1>{{cohortName}}</1> <2>{{jobName}}</2>"
                  values={{
                    cohortName,
                    jobName,
                  }}
                >
                  Hello <Chip>{{ cohortName }}</Chip>{" "}
                  <strong>{{ jobName }}</strong>
                </Trans>

这会抛出：

Error: Objects are not valid as a React child (found: object with keys {cohortName}). If you meant to render a collection of children, use an array instead.

这导致我使用备用前缀和后缀进入托盘，如下所示：

<Trans
     t={t}
     defaults="hello <1>%%cohortName%%</1> <2>%%jobName%%</2>"
     tOptions={{
                interpolation: {
                  prefix: "%%",
                  sufix: "%%",
                },
     }}
     values={{
                cohortName,
                jobName,
     }}
     >
     Hello <Chip>%%cohortName%%</Chip>{" "}
     <strong>%%jobName%%</strong>
 </Trans>

没有抛出错误，但值

cohortName

和

jobName

呈现为纯文本，而不是来自

<Trans />

子组件的值。

Answer 1

Trans

组件可能会丢失

i18n

实例，它会自动从

I18nContext

获取，因此您必须通过

i18n

属性将其传递给组件。

更新代码：

const { l, 18n } = useTranslation(...);

<Trans
     t={l as TFunction}
     i18n={i18n}
     defaults="hello <chip>{{cohortName}}</chip> <bold>{{jobName}}</bold>"
     values={{
                cohortName,
                jobName,
     }}
     components={{
                chip: (
                  <Chip>
                    <></>
                  </Chip>
                ),
                bold: <strong />,
     }}
 />

Answer 2

对象不是有效的反应子对象：

                  Hello <Chip>{{ cohortName }}</Chip>{" "}
                  <strong>{{ jobName }}</strong>

记住 JSX 中的 { } 是转义为 javascript。 所以

{{ cohortName }}

只是评估

{ cohortName }

，它是

{'cohortName': cohortName }

的简写，它是一个对象。

并且对象不是有效的反应子对象。您可能只想在此处渲染字符串 colonyName

{cohortName}

至于“渲染没有返回任何内容”错误，我们必须查看 Trans 组件源代码来帮助解决。