javascript - 使用 Yahoo 的 react-intl 与 React.js 进行国际化

Question

我试图在 React.js 应用程序中支持不同的语言并找到了 react-intl成为一个好的候选人。他们是transitioning into V2但我很难弄清楚它们是如何协同工作的。 example app过于复杂并且涉及客户端/服务器架构。我只想要一个没有服务器的页面。

看起来步骤是这样的:

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

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

Answer 1

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

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

将区域设置切换为“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')
);