4

我正在尝试在 React.js 应用程序中支持不同的语言，并发现react-intl是一个很好的候选者。他们一直在过渡到 V2，但我很难弄清楚这一切是如何协同工作的。示例应用程序过于复杂，涉及客户端/服务器架构。我只想要一个没有服务器的页面。

看起来步骤是这样的：

  • react-intl使用's定义消息defineMessage
  • 使用添加语言环境addLocaleData
  • 使用构建脚本将扁平化消息数据构建到每个语言环境的文件中

我已经完成了这些步骤，但我不知道如何显示消息。我将我的 React 组件包裹在<IntlProvider>. react-intlV2 github问题真的很长，我一直在努力寻找答案。谁能提供一个简单的工作示例？

4

2 回答 2

4

这是从react-intl wiki修改的示例

查看下面的代码，<IntlProvider>您需要传入一个messages={{post.title: "Hello World", post.body: "Amazing Content"}}. 这将是您从构建脚本中翻译的带有键的对象。

将语言环境切换为“en”将加载默认消息。addLocaleData 添加用于翻译数字和日期格式的数据，而不是字符串。 

import React, {PropTypes} from 'react';
import ReactDOM from 'react-dom';

import {addLocaleData} from 'react-intl';
import en from 'react-intl/locale-data/en';
import fr from 'react-intl/locale-data/fr';
import es from 'react-intl/locale-data/es';
import pt from 'react-intl/locale-data/pt'

addLocaleData([...en, ...fr, ...es, ...pt]);

import {
    injectIntl,
    IntlProvider,
    FormattedRelative,
    FormattedMessage
} from 'react-intl';

const PostDate = injectIntl(({date, intl}) => (
    <span title={intl.formatDate(date)}>
        <FormattedRelative value={date}/>
    </span>
));

const App = ({post}) => (
    <div>
        <h1>{post.title}</h1>
        <p><PostDate date={post.date}/></p>
        <div>{post.body}</div>
    </div>
);

ReactDOM.render(
    <IntlProvider locale={'pt'} messages={{post.title: "Olá Mundo", post.body: "conteúdo surpreendente"}}>
        <App
            post={{
                title: <FormattedMessage id='post.title' defaultMessage='Hello, World!'} />,
                date: new Date(1459913574887),
                body: <FormattedMessage id='post.body' defaultMessage='Amazing Content!'} />,
            }}
        />
    </IntlProvider>,
    document.getElementById('container')
);
于 2016-05-24T14:36:12.540 回答
0

我认为这回答了这个问题。然而，它基于使用 3rd 方翻译服务并建议覆盖翻译文件。我个人所做的是根据脚本生成文件并使用它手动将我的翻译写入另一个文件。https://medium.freecodecamp.com/internationalization-in-react-7264738274a0

于 2017-06-23T20:15:18.293 回答