Question

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

我有更高级别的翻译组件，并按以下方式使用：

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

在一个组件中，我可以通过道具获得所有文本 - 它对我来说很好。

但是，我有很多带常量的纯javascript文件，还需要翻译。例如，验证模式包含错误消息或带有选择元素的constats：

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

在react app中翻译纯js文件的最佳aproch是什么？

Answer 1

看起来像你使用i18next（translate hoc）。

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

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

但更好的是在组件内部进行翻译 - 因此翻译可以适应语言变化。所以我考虑做Chase建议的最佳选择：

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

成分</ P>

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

...


render(){
    const { t } = this.props;
    return <span>{${t(error.key)}}</span>
}

Answer 2

我对这个问题感到困惑，但是这样的工作有用吗？

Constants.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>
}

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

Answer 3

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

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

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"
  }
}

并且您拥有提供translate方法的HOC和您需要翻译的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>
    )
  }
}

反应中常量文件的翻译

3 个答案: