React i18n 翻译问题

Question

我在 meteor/react 应用程序中使用 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

Answer 1

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

换句话说，这应该有效：

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

React i18n 翻译问题

React i18n translate issue

internationalization

translate

reactjs