React JS i18next 使用 JSX 插值进行翻译

Question

我想在 i18next 翻译方法的插值对象中将一个 JSX 对象作为一个项目传递。

请考虑以下代码和结果：

import React            from "react";
import {useTranslation} from "react-i18next";
import MoneyDisplay     from "../../../components/_generals/MoneyDisplay";

const minAmount = 1000;
const MyCompo   = () => {
    const {t} = useTranslation();
    const result = t('expr:Minimum amount for issue a new pre-invoice is {{minAmount}}', {minAmount: <MoneyDisplay value={minAmount} longUnit/>});
    return <div>{result}</div>;
};
export default MyCompo;

结果是：

<div>[object Object]</div>

在这种情况下，如果不使用 Trans 组件，我怎样才能得到正确的结果？

Answer 1

他们有一个遗留选项：https://react.i18next.com/legacy-v9/interpolate 但它已被弃用，所以我不会使用它。

我认为 Trans 是您最好的选择

React JS i18next 使用 JSX 插值进行翻译

React JS i18next translate with JSX interpolation

javascript

reactjs

jsx

i18next