reactjs - React 18＆react-i18next Trans组件插值问题

Question

我刚刚升级到 react v18，但在使用 react-i18next 的 Trans 组件进行插值时遇到错误

<Trans i18nKey="pageNrOfAll" pageNr={pageNr} pagesCount={pagesCount}>
    Page
    <strong className="spacing">{{ pageNr }}</strong>
    of
    <strong className="spacing">{{ pagesCount }}</strong>
 </Trans>

Type '{ pageNr: number; }' is not assignable to type 'ReactNode'.
  Object literal may only specify known properties, and 'pageNr' does not exist in type 'ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal'.ts(2322)
index.d.ts(1375, 9): The expected type comes from property 'children' which is declared here on type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'

如果我只保留一对括号{ pageNr }，我会收到以下错误

react-i18next:: Trans: the passed in value is invalid - seems you passed in a variable like {number} - please pass in variables for interpolation as full objects like {{number}}. 1

Answer 1

这里有一个 Unresolved 问题:https://github.com/i18next/react-i18next/issues/1483

只需关注那里的讨论即可。