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

这里有一个未解决的问题：https://github.com/i18next/react-i18next/issues/1483

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

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

React 18 & react-i18next Trans component interpolation issue

reactjs

react-i18next