在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

您可以将dangerouslySetInnerHTML用于翻译容器(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-具有简单的html元素，如低-高-高-其他-v0.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-v1.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
);