Reactjs i18next react Trans组件-正确转义字符

我有一个基于react的应用程序，并使用i18next的Trans组件进行翻译

假设我们有一个用户注册表单，我们希望通过显示以下文本确认已创建了一个新帐户：

已创建名为名为的用户

其中，名称由用户提供，并以粗体显示

我现在看到的是react中的以下代码：

<Trans i18n={i18next} i18nKey="userCreated" values={{name: 'Tom'}}>
   User with name <strong>{{name}}</strong> has been created.
</Trans>

已创建名为{{name}}的用户。

和下面的翻译字符串

"userCreated": "User with name <1>{{name}}</1> has been created.",

“userCreated”：“已创建名为{{name}的用户。”，

对于一个名为“Tom”的简单案例，它可以正常工作并显示

已创建名为汤姆的用户

然而，我想让用户在他们的名字中使用特殊字符。当我把名字改成汤姆和杰瑞的时候

名为Tom&；的用户；Jerry已创建

在做了一些研究之后，我认为问题在于i18next和react都会转义它们的输入，因此名称会转义两次。我通过添加以下选项关闭了

i18next.init

中的i18next转义

插值：{escapeValue:false}，

这就解决了汤姆和杰瑞的案子：

已创建名为汤姆和杰瑞的用户

---

但是有一些输入完全破坏了它，例如设置

name:'Tom这个问题没有优雅的解决方案。问题的根源在于
Trans
组件的源代码。您要么需要为此文件创建修补程序来更改此行为，要么自己实施欺骗伎俩。如果要使用欺骗的解决方案，则需要创建一个组件
UnescapedTrans
，该组件将使用lodash对HTML实体进行unescape：

import React, { Suspense } from "react";
import { Trans } from "react-i18next";
import { unescape } from "lodash";


const getUnescapeChildrenRef = ref =>
  Array.from(ref.childNodes).forEach(node => {
    if (!node.innerText) {
      return node;
    }

    node.innerText = unescape(node.innerText);
  });

const UnescapedTrans = props => (
  <div ref={getUnescapeChildrenRef}>
    <Trans {...props} tOptions={{ interpolation: { escapeValue: true } }} />
  </div>
);

import React，{suspend}来自“React”；
从“react-i18next”导入{Trans}；
从“lodash”导入{unescape}；
常量getUnescapeChildrenRef=ref=>
Array.from（ref.childNodes）.forEach（node=>{
如果（！node.innerText）{
返回节点；
}
node.innerText=unescape（node.innerText）；
});
const UnescapedTrans=props=>(
);

.
这个问题没有优雅的解决方案。问题的根源在于
Trans
组件的源代码。您要么需要为此文件创建修补程序来更改此行为，要么自己实施欺骗伎俩。如果要使用欺骗的解决方案，则需要创建一个组件
UnescapedTrans
，该组件将使用lodash对HTML实体进行unescape：

import React, { Suspense } from "react";
import { Trans } from "react-i18next";
import { unescape } from "lodash";


const getUnescapeChildrenRef = ref =>
  Array.from(ref.childNodes).forEach(node => {
    if (!node.innerText) {
      return node;
    }

    node.innerText = unescape(node.innerText);
  });

const UnescapedTrans = props => (
  <div ref={getUnescapeChildrenRef}>
    <Trans {...props} tOptions={{ interpolation: { escapeValue: true } }} />
  </div>
);

import React，{suspend}来自“React”；
从“react-i18next”导入{Trans}；
从“lodash”导入{unescape}；
常量getUnescapeChildrenRef=ref=>
Array.from（ref.childNodes）.forEach（node=>{
如果（！node.innerText）{
返回节点；
}
node.innerText=unescape（node.innerText）；
});
const UnescapedTrans=props=>(
);

.
您能提供其他代码吗？您认为的另一个输入组件是转义输入？@DrewReese我相信i18next是转义一次-翻译成&；-然后react再次转义它，这样就不用显示HTML实体&；按字面意思显示。在i18next中关闭转义修复了这个问题，但是由于某种原因，像<或>这样的字符破坏了整个功能。没有更多的react代码，我粘贴的Trans代码只是在另一个组件中呈现。啊，那么这可能是使用react[有效。你能提供另一个react代码吗？你认为另一个输入组件是转义输入吗？@DrewReese我相信i18next是转义一次-翻译成&；-然后react再次转义，这样就可以不显示HTML实体而直接显示。在i18next中关闭转义可以解决问题，但对于一些原因，如<或>字符破坏了整个功能。没有更多的react代码，我粘贴的Trans代码只是在另一个组件中呈现。啊，那么这可能是使用react的[有效。谢谢，效果很好：-）使其在我的Web应用程序中工作的罕见实例之一，如果（ref！=null）在代码的开头。我也在github上确认了这个库不会处理这个问题，但是它应该只针对字符而中断，所以另一个选项是明确禁止/映射它们：谢谢，非常好：-）为了使它在我的webapp中工作，如果（ref！=null），我必须添加一个额外的nullcheck在代码的开头。我也在github上确认了库不会处理这个问题，但它应该只对字符进行中断，所以另一个选项是显式禁止/映射它们：