React i18n 翻译问题答案

【问题标题】：React i18n translate issueReact i18n 翻译问题
【发布时间】：2018-11-25 03:36:08
【问题描述】：

我在我的流星/反应应用程序中使用 i18n 并遇到了一些问题。在这种情况下，一切正常：

import { translate, Trans } from 'react-i18next';
...
export class AddressVerificationForm extends React.Component {
...
{this.props.t('address.photos.format')}
...
export const AddressVerificationFormTranslated = translate('common')(AddressVerificationForm);

但在这种情况下：

import { translate, Trans } from 'react-i18next';
...
export function UserInterface({data, onAdmin, isAdmin}: propTypes) {
...
{this.props.t('address.country')}
...
export const UserInterfaceTranslated = translate('common')(UserInterface);

我明白了：

Uncaught TypeError: Cannot read property 't' of undefined

【问题讨论】：

标签： reactjs internationalization translate

【解决方案1】：

在第一个 sn-p 中，您扩展了 React 类，但在第二个 sn-p 中，this 不是指您的组件，而是指函数本身。因此，没有可供阅读的道具。您需要将参数 t 与其他参数一起添加。

换句话说，这应该有效：

export function UserInterface({data, onAdmin, isAdmin, t}: propTypes) {
...
{t('address.country')}

【讨论】：