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

【问题标题】：React Intl - Single file for every componentReact Intl - 每个组件的单个文件
【发布时间】：2018-02-05 09:51:56
【问题描述】：

是否可以为每个组件创建一个特定的翻译文件而不是一个唯一的大文件？我在子文件夹中组织了特定的组件，在同一个文件夹中有一个特定的翻译文件会很好。

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

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

是这样的：

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

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

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

比渲染代码：

<IntlProvider locale={this.state.locale} messages={this.state.messages}>
[...]

感谢您的帮助！

【问题讨论】：

标签： reactjs

【解决方案1】：

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

所以：import ENGLISH from './locales/MyComponent/en'; 然后你导出默认而不是导出

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

【讨论】：

感谢您的回答，但我错过了一些关于您的解决方案的事情。首先，我想将我的组件翻译文件放在组件 jsx 的同一目录下，因为我希望组件尽可能独立。现在。我的 App.jsx 是根应用程序，它有 IntlProvider 标记，作用于下面的每个子级。那么，如何在我的组件中使用基础翻译（从上面继承）和特定的组件翻译文件（合并字典）？
嘿@RetroMime 你有解决方案吗？我有点陷入同样的问题
我认为最好有一个大文件。因为每次向项目添加新文件夹时，您都必须返回并在根翻译中导入它，而且将一个文件翻译成另一个语言环境文件要容易得多，基本上您必须担心一个文件。减少人为错误。

【解决方案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
  }
})

我想你可以做类似的事情，将你的翻译文件从你的组件导入到一个主翻译文件中。

【讨论】：