React JS i18next 使用 JSX 插值進行翻譯

Question

我想通過 JSX object 作為 i18next 翻譯方法的插值 object 中的項目。

請考慮以下代碼和結果：

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 是你最好的選擇