当我尝试使用react-i18nextTrans组件插入一些React组件时，我得到以下错误：
未捕获错误：反式（...）：未从渲染返回任何内容。这通常意味着缺少return语句。或者，若要不呈现任何内容，则返回null。
我这样调用Trans组件：

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

我不明白为什么这是一个问题，因为根据文档，这应该是可以的。
我不认为问题是与react-i18next跨组件，但我不确定。有什么想法吗
我尝试了另一个版本，使用模板作为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 />是其子级的组件的值。