React-i18next и замена ключей-заполнителей компонентами
Раньше я использовал 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 ? Если нет, то какой другой способ вставки компонентов в переведенную строку?
Ответы 2
https://react.i18next.com/latest/транс-компонент предназначен для включения компонентов реакции (таких как br, strong, ...) в ваши переводы.
Вам нужно настроить реакцию i18next следующим образом в вашем i18n.js для поддержки основных тегов:
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,
})
);
Да, я видел это, однако он не может быть напрямую перенесен из моих существующих переводов ICU, а также не совсем полезен. Труднее заставить нетехнического переводчика использовать
<0></0>для пометки<br />, чем использовать<br />или{br}.