i18next React - HTML 标签

要在React中使用i18next库并包含HTML标签，你可以按照以下步骤进行操作：

1. 首先，确保你已经安装了i18next和react-i18next库。你可以使用以下命令进行安装：

npm install i18next react-i18next

2. 在你的React组件中，导入所需的库：

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

3. 在组件函数中调用useTranslation钩子函数，以获取翻译函数和当前语言：

function MyComponent() {
  const { t } = useTranslation();
  // ...
}

4. 在组件的render函数中，使用翻译函数来翻译文本，并包含HTML标签。你可以在文本中使用HTML标签，例如<strong>、<br>等。确保你在翻译函数前面使用t前缀：

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

  return (
    <div>
      <h1>{t('welcome.title')}</h1>
      <p>{t('welcome.message')}</p>
      <p>{t('welcome.description')}</p>
    </div>
  );
}

5. 在你的i18n配置文件中，确保你已经设置了你想要的语言翻译。例如，在JSON文件中：

{
  "en": {
    "welcome": {
      "title": "Welcome to my app",
      "message": "Hello, <strong>{{name}}</strong>!",
      "description": "This is a <strong>multiline</strong> description."
    }
  }
}

6. 最后，你可以在组件中传递动态值给翻译函数。在上面的例子中，我们在message中使用了{{name}}变量。你可以在组件中动态设置name的值，例如：

function MyComponent() {
  const { t } = useTranslation();
  const name = 'John';

  return (
    <div>
      <h1>{t('welcome.title')}</h1>
      <p>{t('welcome.message', { name })}</p>
      <p>{t('welcome.description')}</p>
    </div>
  );
}

这样，你就可以在React中使用i18next库，并包含HTML标签了。确保在翻译文本中使用t前缀，并在需要时使用动态值。