Javascript react中常量文件的翻译

我正在努力为我的react应用程序找到最好的翻译概念

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

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

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

但是，我有很多带有常量的纯javascript文件，并且需要在那里进行转换。例如，存在带有错误消息的验证模式或带有select元素的constats，如：

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

---

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

我对这个问题有点困惑，但这样做是否有效

常数.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>
}

从“/Constants.js”导入常量；
常量{error}=常量；
...
render（）{
返回{`Error:${Error.label}`}
}

---

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

看起来您使用的是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
    }
};

组成部分

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

...


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

从“/Constants.js”导入常量；
常量{error}=常量；
...
render（）{
const{t}=this.props；
返回{${t（error.key）}
}

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

所以您有如下常量文件：

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（不确定它是如何在你的应用程序中实现的，但我想象它是这样的）

我们用翻译键替换了标签，因此现在我们可以将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>
    )
  }
}

类MyComponent扩展了React.Component{ render（）{ const{translate}=this.props 返回( {translate（'Animal.title'）} {动物。地图（动物=>( )} ) } }

---

假设您使用的是像Redux/similor这样的全局存储，我会在语言发生变化时在那里调度一个操作，然后使用Redux存储状态来确定区域索引返回的内容。例如，您可以创建一些区域设置文件

en.js、it.js

等，导入这些文件，然后使用switch语句使用Redux存储状态来确定要返回的区域设置对象。是否检查了react intl？@DhavalPatel是的，我检查了，但我不知道如何使用Redux的翻译在纯js文件中使用它store@SamHH我这样做了，但我不能在纯js文件中使用状态。您可以为纯js文件创建一个无状态组件并使用它

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

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