如何使 HTML 标签在 JSON i18next 翻译中起作用？答案

【问题标题】：how to make HTML tag work in JSON i18next translation?如何使 HTML 标签在 JSON i18next 翻译中起作用？
【发布时间】：2022-01-28 23:19:38
【问题描述】：

在 i18n 翻译中，HTML 标记显示为文本。我该如何解决？并且 'deviceLimit' 属性也不会显示。

tsx 文件：

const DeviceLimitTooltip: FunctionComponent<Props> = (props) => {
  const { classes, deviceLimit, isDeviceLimitReached, children, style } = props;
  const [t] = useTranslation();

  if (isDeviceLimitReached) {
    return (
      <Tooltip
        title={
          <React.Fragment>            
            {t("devices.freePlan.lastDevice", {deviceLimit: deviceLimit})}            
            <Link color={'secondary'} href={SUPPORT_CONTACT_US} target={'_blank'}>
              {t('devices.freePlan.contactUs')}
            </Link>
          </React.Fragment>
        }
        placement="top"
        interactive
        classes={{ popper: classes.popper, tooltip: classes.tooltip }}
      >
        <span style={style}>{children}</span>
      </Tooltip>
    );
  }

  return <React.Fragment>{children}</React.Fragment>;
};

translation.json：

 "freePlan": {      
      "lastDevice": "You've reached <strong>your limit of {{deviceLimit}} devices</strong> under the current free plan. To add more devices, please, ",
      "contactUs": "contact us."     
    }

这是现在的截图

【问题讨论】：

标签： reactjs json typescript react-redux react-i18next

【解决方案1】：

我建议你使用 Trans 组件：https://react.i18next.com/latest/trans-component

更多信息可以在这个stackoverflow问题中找到：HTML tags in i18next translation files in React

【讨论】：