reactjs - 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 中没有太多更改的情况下重用这个属性文件
解决方案
您可以使用 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
推荐阅读
- postgresql - 为什么实体没有在 postgres 中更新
- visualization - 如何将 Holoviews 图形转换为 Bokeh“模型”以利用更多 Bokeh 功能,例如 bokeh.models.GraphRenderer 和 node_renderer?
- docker - 使用本地文件夹进入 docker 容器
- python - 如何将 Excel 列读取为 datetime.datetime 而不是自动 datetime.time
- boost-bimap - boost::bimap::unordered_set_of v/s std::unordered_set 的优势
- reactjs - 仅更新字符串数组时如何进行状态更新
- java - 将大字符串写入文件的问题
- git - 在进行分支合并时,我应该怎么做才能避免丢失与 Git 的提交?
- ruby - 尝试使用 Ruby 对我的数据湖存储 gen2 进行 Azure REST API 调用时,“服务器无法对请求进行身份验证”
- vue.js - 预加载器vue.js的工作问题