首页 > 解决方案 > React 应用程序 i18n 支持

问题描述

我们有一个 React 应用程序,其中所有小部件的标签都是从属性文件中读取的,

属性文件:

export const properties = {
  dashboardcrumb_label: 'DASHBOARD',
  channelcrumb_label: 'CHANNELS',
    jobcard_header: 'JOBS',
    cancel_label: 'CANCEL'
  }

在 js 文件中的使用(示例):

import { properties } from '../../../../resources/label_property'
<FlatButton label={properties.cancel_label}

现在我们需要使其与 i18n 兼容。请建议一种更简单的方法来实现 i18n,我可以在 js 中没有太多更改的情况下重用这个属性文件

标签: reactjsinternationalizationreact-i18next

解决方案


您可以使用 hoc 包装您的组件,withNamespace如下所示:

import { withNamespaces } from 'react-i18next';
// it would add 't' and 'lng' in the props
const { t } =this.props;
<FlatButton label={t('cancel_label')}

我个人建议你使用reaact-intl


推荐阅读