React-i18next

Question

我被迫使用以下密钥：

"key": "Some Text <a href=https://www.example.com/>Read more</a>"

是否可以在 React-i18next 的 <Trans> 组件中使用上述内容，从而使用 href attr？这是我目前所拥有的：

i18下一个配置：

.init({
  react: {
    transSupportBasicHtmlNodes: true,
    transKeepBasicHtmlNodesFor: ['u', 'a']
  }
})

组件：

<Trans i18nKey="key">
 Text <u><a to='link'>link</a></u>
</Trans>

或

<Trans i18nKey="key">
 Text <u><a to={t('link')}>link</a></u>
</Trans>

输出缺少锚标记上的 href 属性：

"Some Text <u><a>Read more</a></u>"

Answer 1

将 prop 更改为 href prop。您正在使用 html 锚标记而不是反应路由器 dom Link。

<Trans i18nKey="key">
 Text <u><a href={t('link')}>link</a></u>
</Trans>

Answer 2

您需要在定义键值时使用插值，因为 transKeepBasicHtmlNodesFor 不保留属性。

检查 this link 了解更多详情

transKeepBasicHtmlNodesFor 允许元素没有附加属性，如 className 并且只有没有子项（空）或一个文本子项：

 

bold

some paragraph

but not:

 // no attributes allowed

bold something // no attr

<bold>bolditalic // no inner elements - only strings!

对于您的情况，您将使用密钥

"key": "Some Text <1><0>Read more</0></1>"

并像 Trans 一样使用它

<Trans i18nKey="key">
 Text <u><a href="href=https://www.example.com/">link</a></u>
</Trans>

请记住在 anchor tag

上使用 href 而不是 to 属性

检查 How to get the correct translation string? 是否编写了正确的翻译字符串

React-i18next - HTML <a> anchor href 保存

React-i18next - HTML <a> anchor href preservation

reactjs