以前,我使用的是react-intl
,并且能够为将被组件替换的项目设置占位符,例如{br}
与<br />
。
我目前在尝试使用react-i18next
和i18next-icu
时遇到错误:
// Using Intl format (via i18next-icu)
{
"test": "Replace with a{br}line-break. {button}"
}
t("test", { br: <br />, button: <button>Click me!</button> });
// Outputted translated text
Replace with a[object Object]line-break. [object Object]
实际上可以使用i18next
/ i18next-icu
来做到这一点吗?如果没有,将组件插入翻译后的字符串的另一种方法是什么?
答案 0 :(得分:1)
您需要在 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>
我刚刚注意到不可能提醒 Trans 组件。据我所知,你不能用 t()
函数加粗或使用任何标签。但至少你仍然可以使用普通的占位符。
像这样:
const keyInTranslationJsonFile=`You've selected the max of {{selectLimit}} elements`;
alert(
t(keyInTranslationJsonFile, {
selectLimit: selectLimit,
})
);
答案 1 :(得分:0)
https://react.i18next.com/latest/trans-component可以在您的翻译中包含反应成分(例如br,strong等)