react 中常量文件的翻译

Question

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

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

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

在组件内部，我可以通过 props 获得所有文本 - 它对我来说效果很好。

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

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

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

Answer 1

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

只需在文件中导入 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>
}

Answer 2

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

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

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

Answer 3

我对这个问题有点困惑，但是这样的东西有用吗？

常量.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 4

这不是我最引以为豪的解决方案，但我暂时在 i18next 中使用箭头函数。对于上面的例子：

export default [
    {
        value: 'aaa',
        getLabel: () => i18next('bbb'),
    }
];

避免使用翻译键作为其他注释，因为目前（2023 年）该方法将破坏 i18next 的打字稿支持。

我知道这对性能来说可能很糟糕，但我暂时找不到更好的东西。