在 React I18next 中添加文本链接

Question

我对 I18next 有疑问。我不知道如何使网站链接起作用，这是我的代码：

import React, { Suspense } from "react";
import i18n from "i18next";
import { initReactI18next, useTranslation, Trans } from "react-i18next";

const translationSwe = {
about: "Information",
example: "Exempel <br> <strong>text</strong>, här är <a target='_blank' rel='noreferrer 
noopener' href='https://youtube.com'>länk</a>"
}

const translationEng = {
about: "About"
example: "Example <br> <strong>text</strong>, here is <a target='_blank' rel='noreferrer 
noopener' href='https://youtube.com'>link</a>"
}

i18n.use(initReactI18next).init({
resources: {
swe: { translation: translationSwe },
eng: { translation: translationEng },
},
lng: "swe",
fallbackLng: "swe",
interpolation: { escapeValue: false },
});

const App = () => {
const { t } = useTranslation();

return(
<Suspense fallback="Loading..">
<div className="app">
<p><Trans i18nkey="example"/></p>
</div>
</Suspense>
);
};

换行符和强标签可以正常工作，但链接不行。它只是打印链接而不是

<a>länk</a>

我读过一些如何使链接起作用的文章，但在每个文章中，数据都位于单独的 JSON 文件中。在每个组件中，您还必须插入调用 Trans 组件的链接。 我想将文本（包括链接等）添加到translationSwe 和translationEng，而无需稍后编辑Trans 组件，以防我决定更新或添加链接。 我怎样才能实现这一点？

Answer 1

您正在使用 Trans 组件，这意味着您必须在翻译键中编写正确的语法：

// key in resources:
keyWithLink: "Hey this is a <1>LINK</1>! Also called <strong>hyperlink</strong>"

用于 Trans 组件：

<Trans i18nKey="keyWithLink">This should be a <a href="https://www.locize.com">some link</a></Trans>

查看此codesandbox示例：https://codesandbox.io/s/react-i18next-example-forked-8y4i0?file=/src/i18n.js:302-383

Answer 2

您可以将angerouslySetInnerHTML 用于您的翻译容器(p)。

如果您使用“t”函数，则此变体有效

希望我的解决方案能帮到你

Answer 3

您可以使用 ReactHtmlParser 来解决此问题。

它将字符串解析为 HTML 标签。切片并将其转换为任何标签。

import ReactHtmlParser from 'react-html-parser'; 

//Initialize
const string_html = "Exempel <br> <strong>text</strong>, här är <a target='_blank' rel='noreferrer 
noopener' href='https://youtube.com'>länk</a>"

//When render
<> {ReactHtmlParser(string_html)} </>

Answer 4

无需使用额外的模块...您的情况就是 Trans 组件的全部内容...

虽然 Trans 组件可以解析基本的 HTML 标签，如 br、strong...，但使用锚标签需要将 React 元素传递给组件...

简单标签：https://react.i18next.com/latest/trans-component#usage-with-simple-html-elements-like-less-than-br-greater-than-and-others-v10.4.0

因此，您的示例在跨性别儿童中不使用内容时应类似于：

import React, { Suspense } from "react";
import i18n from "i18next";
import { initReactI18next, useTranslation, Trans } from "react-i18next";

const translationSwe = {
about: "Information",
example: "Exempel <br> <strong>text</strong>, här är <MyLink>länk</MyLink>"
}

const translationEng = {
about: "About"
example: "Example <br> <strong>text</strong>, here is <MyLink>link</MyLink>"
}

i18n.use(initReactI18next).init({
resources: {
swe: { translation: translationSwe },
eng: { translation: translationEng },
},
lng: "swe",
fallbackLng: "swe",
interpolation: { escapeValue: false },
});

const App = () => {
const { t } = useTranslation();

return(
<Suspense fallback="Loading..">
<div className="app">
<p><Trans i18nkey="example" components={{ MyLink: <a target='_blank' rel='noreferrer 
noopener' href='https://youtube.com'>link</a> }}/></p>
</div>
</Suspense>
);
};

参见 https://react.i18next.com/latest/trans-component#alternative-usage-which-lists-the-components-v11.6.0

Answer 5

使用 Linkify 包

https://www.npmjs.com/package/react-linkify

安装：

yarn add react-linkify

或

npm install react-linkify --save

用途：

import Linkify from 'react-linkify';

React.render(
  <Linkify>Examples are available at tasti.github.io/react-linkify/.</Linkify>,
  document.body
);

Answer 6

您可以使用 html-react-parser lib 来解决此问题。 在这里查看文档

它将字符串解析为 HTML 标签。切片并将其转换为任何标签。

示例

导入：

import parse from 'html-react-parser';

测试字符串：

{"testId": "text test, bold <b>here</b>"}

代码：

<h5>⦁ {parse(fastTab)}</h5>