我正在尝试为我的 React 应用程序找到最佳的翻译概念。
我有一个用于翻译的高阶组件，并通过以下方式使用它：
export default translate('MyComponent')(MyComponent);
在一个组件中，我拥有 props 可用的所有文本 - 它对我来说很好用。
但是，我有很多带有常量的纯 javascript 文件，并且还需要在那里进行翻译。例如，有带有错误消息的验证模式或带有选择元素的常量，例如：
export default [
{
value: 'aaa',
label: 'bbb', // want to translate this label
}
];
在 React 应用程序中翻译纯 js 文件的最佳方法是什么？
看起来您使用 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>
}
我不确定您的翻译是如何准确组织的，但我在常量翻译方面遇到了类似的情况，我找到了适合我的解决方案。如果您有键值转换格式的翻译文件，您可以使用它。
所以你有这样的常量文件：
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>
)
}
}
我对这个问题有点困惑，但是这样的事情会起作用吗？
常量.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>
}
假设只有一个错误容器，如您提供的示例。