Reactjs react-I18下一步并用组件替换占位符键

以前我使用的是

react intl

，能够为将被组件替换的项目设置占位符，例如

{br}

和

我当前在使用

react-i18next

和

i18next icu

时出错，我试图执行以下操作：

//使用Intl格式（通过i18next icu）
{
“测试”：“替换为{br}换行符。{button}”
}

t（“测试”{br:
，按钮：点击我！}）；

//输出的翻译文本
替换为[object]换行符。[对象]

---

使用

i18next

/

i18next icu

是否确实可以做到这一点？如果没有，将组件插入翻译字符串的另一种方法是什么？

是否在翻译中包含react组件（如br、strong等）

您需要在i18n.js中这样配置react i18next以支持基本标记：

import i18n from "i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import { initReactI18next } from "react-i18next";

i18n
    .use(LanguageDetector)
    .use(initReactI18next)
    .init({
        fallbackLng: "en",
        react: {
            // https://react.i18next.com/latest/trans-component#trans-props
            transSupportBasicHtmlNodes: true,
            transKeepBasicHtmlNodesFor: ["br", "strong", "b", "i"],
        }
    });

export default i18n;

然后你可以像@jamuhl说的那样使用如下组件：

const keyInTranslationJsonFile=`My text that can be <b>{{boldPlaceholder}}</b>`;
<Trans i18nKey={keyInTranslationJsonFile}>{{boldPlaceholder: "bold"}}</Trans>

---

是的，我看到了，但是它不能直接从我现有的ICU翻译中移植，也不是完全有用的。让非技术翻译人员使用

标记

比让他们使用

或

{br}

更难。因为

v10.4.0

可以使用选项在翻译字符串中插入基本HTML元素，如

；不需要

。

const keyInTranslationJsonFile=`You've selected the max of {{selectLimit}} elements`;
alert(
    t(keyInTranslationJsonFile, {
        selectLimit: selectLimit,
    })
);