[英]Error in <Trans /> component with react-i18next: Nothing returned from render
When I try to interpolate some React components with the react-i18next
Trans
component I get the following error:当我尝试使用react-i18next
Trans
组件插入一些 React 组件时,我收到以下错误:
Uncaught Error: Trans(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
I am calling the Trans
component like so:我这样调用Trans
组件:
<Trans
t={l as TFunction}
defaults="hello <chip>{{cohortName}}</chip> <bold>{{jobName}}</bold>"
values={{
cohortName,
jobName,
}}
components={{
chip: (
<Chip>
<></>
</Chip>
),
bold: <strong />,
}}
/>
I cannot see why this is a problem as according to the docs this should be ok.我不明白为什么这是一个问题,因为根据文档这应该没问题。
I do not think the issue is with react-i18next
Trans component but am not sure.我不认为问题出在react-i18next
Trans 组件上,但我不确定。 Any ideas?有任何想法吗?
I have tried an alternative version where I use a template as the return value from the Trans
component:我尝试了一个替代版本,其中我使用模板作为Trans
组件的返回值:
<Trans
t={t}
defaults="hello <1>{{cohortName}}</1> <2>{{jobName}}</2>"
values={{
cohortName,
jobName,
}}
>
Hello <Chip>{{ cohortName }}</Chip>{" "}
<strong>{{ jobName }}</strong>
</Trans>
This throws:这抛出:
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.
Which lead me to tray using an alternate prefix and sufix like so:这导致我使用备用前缀和后缀进入托盘,如下所示:
<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>
No errors thrown but the values cohortName
& jobName
are rendered as plain text and not the value from the component that <Trans />
is a child of.没有抛出错误,但值cohortName
和jobName
名称呈现为纯文本,而不是<Trans />
子组件的值。
Objects are not valid react children:对象无效反应子级:
Hello <Chip>{{ cohortName }}</Chip>{" "}
<strong>{{ jobName }}</strong>
Remember { } inside JSX is an escape into javascript.记住 JSX 中的 { } 是进入 javascript 的逃逸。 So {{ cohortName }}
is just evaluating { cohortName }
which is shorthand for {'cohortName': cohortName }
which is an object.所以{{ cohortName }}
只是评估{ cohortName }
,它是{'cohortName': cohortName }
的简写,它是一个object。
And objects are not valid react children.并且对象是无效的反应孩子。 You probably just want to render the string cohortName here {cohortName}
您可能只想在此处呈现字符串队列名称{cohortName}
As for the "Nothing returned from render" error we'd have to see the Trans components source code to help there.至于“没有从渲染返回”错误,我们必须查看 Trans 组件源代码来帮助那里。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.