如何在本机反应中使用 i18next 显示文本和超链接

【问题标题】：How to display text and hyperlinks using i18next in react native如何在本机反应中使用 i18next 显示文本和超链接
【发布时间】：2021-01-26 10:19:28
【问题描述】：

我有一些动态内容要翻译，其中包括文本和链接，我想知道你如何在 react native 中使用 i18next 来正确显示这些内容，以便标签在视图中显示可点击。

{"someContent": "Hello, please click the <a>link</a>"}

import {useTranslation} from 'react-i18next';
const {t} = useTranslation();
<Text>{t('someContent')}</Text>

上面只是打印出整个内容而不是渲染标签。想知道如何在视图中正确呈现此内容！我想知道我们可以使用dangerouslySetInnerHTML={{ __html: "someHtml" }} 之类的东西吗？如果有，这种情况下如何使用？

【问题讨论】：

标签： reactjs react-native i18next

【解决方案1】：

你需要的是Trans组件（你可以找到官方文档here）。

在您的情况下，这意味着您的 JSX 代码将如下所示：

<Text>
  <Trans t={t} components={[<a href="#whatever"/>]} />
<Text>

在你的 EN.js 文件中你会写：

{
  "someContent": "Hello, please click the <0>link</0>"
}

您可以根据需要在components 属性中放置任意数量的组件，然后在翻译字符串中您可以通过它们的索引来引用它们，如我在示例中所示（<0> 和</0> 引用第一个组件)。

【讨论】：