如何在Next-i18 next/ React i18 next中插入一个改变文本位置的链接组件

qco9c6ql 于 2023-05-17 发布在 React

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

目前我使用Next.js和Next-i18 next for I18 N，但我知道React/i18 next实现基本上是一样的。
我遇到的问题是，我需要在一些翻译文本中插入下一个链接组件，但根据语言（英语与德语），文本和链接的顺序会改变。例如，我正在努力的文本是：'Accept data policy'与'Datenschutzerklärung akzeptieren'
目前，我有一个快速解决方案，在翻译JSON文件中为文本和链接创建两个值，然后根据当前语言交换位置。显然，这不是一个可持续的解决方案。我曾尝试使用'Trans'组件，但这显示了一些意想不到的行为，其中翻译只有在页面刷新后才会启动，否则您会看到Trans组件中的文本。
例如：

function LinkText({ href, children}) {
    return <Link to={href || ''}>{children}</Link>;
  }

  return (
      <Trans i18nKey="sentence">
         text before link
        <LinkText href="/data-policy">{t("dataPolicy")}</LinkText> 
         text after link
      </Trans>
  );

JSON的问题：

{
  "sentence": "agree to our <1><0/></1>",
  "dataPolicy": "data policy"
}

下面是我制作的CodeSandbox的链接，用于在React中复制问题：link
(P.S i18 next的实现目前似乎没有有效地交换Codesandbox中的语言，但我将其包括在内，因为代码是MWE的）
谢谢你的帮助，这已经让我疯了。

next.js

来源：https://stackoverflow.com/questions/66108568/how-do-i-interpolate-a-link-component-in-next-i18next-react-i18next-that-chang

1条答案

按热度按时间

wecizke31#

你身上少了几个零件，
1.你的i18next配置缺少一种获取本地文件的方法，我已经添加了i18next-http-backend。
1.您应该使用Trans组件来注入到句子的链接。你的locale json应该看起来像这样：

{
  "sentence": "Accept <0>data policy</0>"
}

// TranslatedLink.js

import React from 'react';
import { useTranslation, Trans } from 'react-i18next';
import { Link } from 'react-router-dom';

function LinkText({ href, children }) {
  return <Link to={href || ''}>{children}</Link>;
}

export default function TranslatedLink() {
  const { t } = useTranslation(['common']);

  return (
    <div style={{ padding: 50 }}>
      <Trans i18nKey="sentence" t={t} components={[<LinkText href="/data-policy" />]} />
    </div>
  );
}

一个工作示例：https://codesandbox.io/s/react-i18n-interpolation-issue-forked-ck8l4

编辑

另一个可能的选项是将对象作为components传递

// TranslatedLink.js

import React from 'react';
import { useTranslation, Trans } from 'react-i18next';
import { Link } from 'react-router-dom';

function LinkText({ href, children }) {
  return <Link to={href || ''}>{children}</Link>;
}

export default function TranslatedLink() {
  const { t } = useTranslation(['common']);

  return (
    <div style={{ padding: 50 }}>
      <Trans i18nKey="sentence" t={t} components={{linkTag: <LinkText href="/data-policy" />}} />
    </div>
  );
}

并将JSON更改为使用具有object属性的标签，

{
  "sentence": "Accept <linkTag>data policy</linkTag>"
}

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

我来回答

如何在Next-i18 next/ React i18 next中插入一个改变文本位置的链接组件

1条答案

编辑

相关问题

热门标签

最新问答