How to use html tags with react-i18next locales?

在使用 react-i18next 库进行国际化时，有时我们需要在翻译文本中嵌入 HTML 标签来实现一些格式化。例如，可能需要在一段文本中对某些单词进行强调，或者添加链接等。react-i18next 提供了几种方法来实现这一点，确保既可以进行国际化又可以安全地渲染 HTML。

方法1: 使用 Trans 组件

Trans 组件是 react-i18next 提供的一个方式，用于处理复杂的翻译场景，如插入 HTML 标签或组件。使用 Trans 组件时，你可以直接在你的翻译资源文件中加入 HTML 标签。

假设你有如下的翻译资源：

json
{
  "welcome": "<strong>Welcome</strong> to our website, <a href='/about'>learn more</a> about us."
}

然后在 React 组件中这样使用：

jsx
import React from 'react';
import { Trans, useTranslation } from 'react-i18next';

function MyApp() {
  const { t } = useTranslation();

  return (
    <div>
      <Trans i18nKey="welcome">
        <strong>Welcome</strong> to our website, <a href="/about">learn more</a> about us.
      </Trans>
    </div>
  );
}

export default MyApp;

在这个例子中，Trans 组件会安全地渲染 HTML，并保持翻译文本中的 HTML 结构。

方法2: 使用 dangerouslySetInnerHTML

如果你不想使用 Trans 组件，另一个选择是利用 React 的 dangerouslySetInnerHTML 属性。这种方法应当谨慎使用，因为它可能会导致 XSS（跨站脚本攻击）安全问题。

首先，确保你的翻译字符串是安全的，然后这样使用：

jsx
import React from 'react';
import { useTranslation } from 'react-i18next';

function MyApp() {
  const { t } = useTranslation();

  return (
    <div>
      <p dangerouslySetInnerHTML={{ __html: t('welcome') }}></p>
    </div>
  );
}

export default MyApp;

安全注意事项

• 当使用 dangerouslySetInnerHTML 时，务必确保翻译字符串来源是安全的，避免 XSS 攻击。
• 尽量使用 Trans 组件，因为它提供了更安全、更灵活的方式来处理 HTML 和组件。

通过上述方法，你可以在 react-i18next 中灵活地使用 HTML 标签，同时确保应用的国际化和多语言支持。