如何在 React 中将 i18next 翻译添加到输入的占位符？答案

【问题标题】：How to add i18next translation to input's placeholder in React?如何在 React 中将 i18next 翻译添加到输入的占位符？
【发布时间】：2021-08-20 12:19:40
【问题描述】：

我使用<Trans i18nKey="item.key">Fallback text</Trans>翻译了整个应用程序

唯一的问题是我不能对输入占位符做同样的事情。

我尝试使用<input placeholder={t('input.placeholder')}/> 并添加“t”以导入import { t, Trans } from "react-i18next";，但随后出现错误Attempted import error: 't' is not exported from 'react-i18next'.

【问题讨论】：

我刚刚阅读了这个库的第一行，它声明你将通过使用钩子“useTranslation”或HOC“withTranslation”来获得“t”变量。请进行搜索

标签： reactjs translation i18next react-i18next

【解决方案1】：

为什么不使用useTranslation 挂钩？

你可以这样做

import { useTranslation } from "react-i18next";
import { TFunction } from "i18next";

然后按如下方式使用：

const { t }: {t: TFunction} = useTranslation()

【讨论】：