3

我正在尝试为我的 react 应用程序找到最佳的翻译概念。

我有一个用于翻译的高阶组件，并通过以下方式使用它：

export default translate('MyComponent')(MyComponent);

在一个组件中，我有所有可用的文本道具 - 它对我来说很好用。

但是，我有很多带有常量的纯 javascript 文件，也需要在那里进行翻译。例如，验证模式带有错误消息或带有选择元素的常量，例如：

export default [
    {
        value: 'aaa',
        label: 'bbb', // want to translate this label
    }
];

在 React 应用程序中翻译纯 js 文件的最佳方法是什么？

4

3 回答 3

8

看起来你使用 i18next（翻译 hoc）。

只需在文件上导入 i18next 并直接使用 t ：

import i18next from 'i18next';
export default {
    error: {
        value: 'aaa',
        label: i18next.t('yourKey'), // want to translate this label
    }
};

但更好的是在组件内部进行翻译——这样翻译可以适应语言的变化。所以我考虑做大通建议的最好的选择：

export default {
    error: {
        value: 'aaa',
        key: 'bbb', // use it as key for t call
    }
};

零件

import Constants from './Constants.js';
const { error } = Constants;

...


render(){
    const { t } = this.props;
    return <span>{${t(error.key)}}</span>
}
于 2017-06-14T10:06:04.783 回答
1

我不确定您的翻译是如何准确组织的，但我在常量翻译方面遇到了类似的情况，我找到了适合我的解决方案。如果你有键值翻译格式的翻译文件，你可以使用它。

所以你有这样的常量文件：

export default [
  {
    id: 1,
    label: 'Cat'
  },
  {
    id: 2,
    label: 'Dog'
  }
]

并翻译此值：

{
  "Animal.title": {
    "en-uk": "Animals",
    "da-dk": "Dyr"
  },
  "Animal.cat": {
    "en-uk": "Cat",
    "da-dk": "Kat"
  },
  "Animal.dog": {
    "en-uk": "Dog",
    "da-dk": "Hund"
  }
}

而且你有 HOC 为你提供translate了你需要翻译的方法和 MyComponent（不确定它是如何在你的应用程序中实现的，但我想它是这样的）。

import Animals from './constants/animals'

class MyComponent extends React.Component {
  render() {
    const { translate } = this.props
    return (
      <div>
        {translate('Animal.title')}
        {Animals.map(animal => (
           <Animal 
             id={animal.id} 
             name={animal.label} 
           />
        )}
      </div>
    )
  }
}

translate('MyComponent')(MyComponent);

所以现在我们已经翻译了 MyComponent 但有一个问题 - 来自纯 js 文件的常量没有被翻译。在这种情况下，我只看到一种解决方案 - 以这种方式重写常量：

export default [
  {
    id: 1,
    label: 'Animal.cat'
  },
  {
    id: 2,
    label: 'Animal.dog'
  }
]

我们用翻译键替换了标签，所以现在我们可以更改 MyComponent 来翻译标签：

class MyComponent extends React.Component {
  render() {
    const { translate } = this.props
    return (
      <div>
        {translate('Animal.title')}
        {Animals.map(animal => (
           <Animal 
             id={animal.id} 
             name={translate(animal.label)} 
           />
        )}
      </div>
    )
  }
}
于 2019-06-21T12:04:36.173 回答
0

我对这个问题有点困惑，但是这样的事情会起作用吗？

常量.js

export default {
    error: {
        value: 'aaa',
        label: 'bbb', // want to translate this label
    }
};

然后在一个组件中你可以像这样解构它

import Constants from './Constants.js';
const { error } = Constants;
...
render(){
    return <span>{`Error: ${error.label}`}</span>
}

假设只有一个错误容器，如您提供的示例。

于 2017-06-13T20:41:49.113 回答