reactjs Next.js和i18 next-两个变量在单一的翻译-而不是链接我得到[对象对象]

li9yvcax 于 2023-04-05 发布在 React

关注(0)|答案(1)|浏览(147)

我有一个页脚组件：

export default function Footer() {
  const { t } = useTranslation("layout-footer");
  const currentYear = new Date().getFullYear();

  return (
    <footer className='py-6 mt-20 border-t-[1px] border-opacity-50'>
      <p className='text-sm text-center mb-6'>{t("addresses")}</p>
      <p className='text-sm text-center mb-6'>
        <Trans
          i18nKey='information'
          t={t}
          components={{
            currentYear,
            link: (
              <Link
                href='https://www.signinsolutions.com'
                className='text-green-600'
                rel='noreferrer'
                target='_blank'
              >
                Sign In Solutions
              </Link>
            ),
          }}
        />
      </p>
    </footer>
  );
}

json文件：

{
  "information": "© {{currentYear}} Sign In App Ltd is part of the {{link}} suite of brands providing global, cloud-based solutions to manage visitors, employees, workplaces and beyond."
}

我尝试了多种不同的东西没有成功-我只是不能得到似乎得到currentYear和链接组件呈现在我的翻译在同一时间-链接将永远是作为[Object object]
Screenshot

reactjs

来源：https://stackoverflow.com/questions/75755512/next-js-and-i18next-two-variables-in-single-translation-instead-of-link-i-ge

1条答案

按热度按时间

3phpmpom1#

我建议在这个例子中使用i18next interpolation。让我为您提供解决方案的草案：
footer组件应该如下所示：

export default function Footer() {
  const { t } = useTranslation("layout-footer");
  const currentYear = new Date().getFullYear();
  const link = "LINK HERE";

  return (
    <footer className='py-6 mt-20 border-t-[1px] border-opacity-50'>
      <p className='text-sm text-center mb-6'>{t("addresses")}</p>
      <p className='text-sm text-center mb-6'>
        {t("information", {currentYear, link} )}
      </p>
    </footer>
  );
}

如果你想禁用转义，那么在你的翻译JSON文件中，请在打开双花括号{{- variable_name}}后使用小减号，就像这样：

{
  "information": "© {{currentYear}} Sign In App Ltd is part of the {{- link}} suite of brands providing global, cloud-based solutions to manage visitors, employees, workplaces and beyond."
}

赞(0）回复(0）举报 2023-04-05

我来回答

reactjs Next.js和i18 next-两个变量在单一的翻译-而不是链接我得到[对象对象]

1条答案

相关问题

热门标签

最新问答