Question

是否有可能为每个组件都有一个特定的翻译文件而不是一个独特的大文件？我已在子文件夹中组织了特定组件，最好在同一文件夹中包含特定的翻译文件。

我实际上是用这个导入命令导入大语言文件：

receiptPage

这是这样的：

import { ENGLISH } from './locales/en';

在构造函数中我设置状态：

export const ENGLISH = {
    lang: 'en',
    messages: {
        "test_message" : "Test Message",
    [...]

比渲染代码：

 locale : 'en',
 messages: ENGLISH.messages,

感谢您的帮助！

Answer 1

当然可以，这取决于您希望如何组织代码。例如，只需为每个组件创建翻译文件。因此，不要'./ locales / en'执行类似'。/ locales / yourcomponent / en'的操作，这样您就可以将所有语言放在一个组件文件夹中。

所以：从'./locales/MyComponent/en'导入ENGLISH; 并导出默认值而不是导出

此外，您可以在 ./ locales / MyComponent 中创建一个索引文件，您可以根据需要导入所有语言，然后从索引中导出它们，以便您可以像 import {ENGLISH一样使用它来自'./locales/MyComponent'。

Answer 2

这是在不久前被问到的，但是我有可能的解决方法。在我自己的项目中，我的翻译文件按路线分开，然后将它们导入到主翻译文件中，然后传递给IntlProvider。

src
-- i18l
---- translations.js //main translation file
---- home.js
---- about.js
---- profile.js
-- app.js

我将每个路线翻译文件导入到我的主翻译文件中，并使用传播运算符将它们放入各自的对象中。

home.js

export const homeEn = {
    //translations here
}
export const homeFr = {
    //translations here
}

translations.js

import { aboutEn, aboutFr } from "./about"
import { homeEn, homeFr } from "./home"
import { profileEn, profileFr } from "./profile"

export default ({
  "en": {
    //translations
    ...aboutEn,
    ...homeEn,
    ...profileEn
  },
  "fr": {
    //translations
    ...aboutFr,
    ...homeFr,
    ...profileFr
  }
})

我想您可以执行类似的操作，将翻译文件从组件导入到主翻译文件中。

React Intl - 每个组件的单个文件

2 个答案: