如何在react-i18next中渲染JSON内带<strong>标签的富文本

问题核心是i18next默认会转义HTML标签，直接调用i18next.t('string')返回的是转义后的字符串（比如<strong>bold</strong>），自然没法渲染出加粗效果。下面是具体解决步骤：

1. 修改i18next初始化配置，关闭HTML转义 #

在初始化i18next时，设置interpolation.escapeValue: false，让i18next保留原始HTML标签：

import i18n from 'i18next';
// 框架适配包，React用initReactI18next，Vue用vue-i18next
import { initReactI18next } from 'react-i18next';

i18n
  .use(initReactI18next)
  .init({
    resources: {
      en: {
        translation: {
          string: "This is a <strong>bold</strong> string"
        }
      },
      zh: {
        translation: {
          string: "这是一段<strong>加粗</strong>的文本"
        }
      }
    },
    lng: 'en', // 默认语言
    interpolation: {
      escapeValue: false // 关键配置：关闭HTML转义
    }
  });

2. 在UI层渲染HTML内容 #

根据你使用的框架，选择对应的方式渲染带HTML的字符串：

React项目 #

用dangerouslySetInnerHTML属性注入HTML：

import { useTranslation } from 'react-i18next';

function MyComponent() {
  const { t } = useTranslation();
  return <div dangerouslySetInnerHTML={{ __html: t('string') }} />;
}

Vue项目 #

用v-html指令：

<template>
  <div v-html="$t('string')"></div>
</template>

原生JavaScript #

直接设置元素的innerHTML：

// 获取目标元素
const targetElement = document.getElementById('text-container');
// 插入翻译后的HTML内容
targetElement.innerHTML = i18next.t('string');

注意事项 #

• 关闭escapeValue后，要确保所有翻译文本都来自可信源，避免XSS攻击风险。如果翻译内容包含用户输入的不可信内容，不要用这种方法，建议改用i18next的插值变量结合UI组件样式实现加粗。

内容的提问来源于stack exchange，提问作者Ritik Sharma