@4c/react-intl 中文文档教程

Question

React Intl

国际化 React 应用程序。 该库提供 React 组件和 API 来格式化日期、数字和字符串，包括复数化和处理翻译。

Overview

React Intl 是 FormatJS 的一部分。 它提供绑定通过其组件和 API 进行 React。

Slack：在 react-intl.slack.com 加入我们的 Slack 以获得帮助、一般对话和更多的 ？？？？？？？？？？？？ 您可以使用此链接注册

Documentation

React Intl 的文档在这个 GitHub 存储库的 Wiki 中，开始。 还有几个可运行的示例应用程序，您可以参考它们以了解所有部分如何组合在一起。

（如果你正在寻找 React Intl v1，你可以在这里找到它。）

Features

• Display numbers with separators.
• Display dates and times correctly.
• Display dates relative to "now".
• Pluralize labels in strings.
• Support for 150+ languages.
• Runs in the browser and Node.js.
• Built on standards.

Example

有这个 Git 存储库中有几个可运行的示例，但这是一个 Hello World 示例：

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {IntlProvider, FormattedMessage} from 'react-intl';

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name       : 'Eric',
            unreadCount: 1000,
        };
    }

    render() {
        const {name, unreadCount} = this.state;

        return (
            <p>
                <FormattedMessage
                    id="welcome"
                    defaultMessage={`Hello {name}, you have {unreadCount, number} {unreadCount, plural,
                      one {message}
                      other {messages}
                    }`}
                    values={{name: <b>{name}</b>, unreadCount}}
                />
            </p>
        );
    }
}

ReactDOM.render(
    <IntlProvider locale="en">
        <App />
    </IntlProvider>,
    document.getElementById('container')
);

这个示例将呈现： “你好 Eric，你有 1,000 条消息。” 进入页面上的容器元素。

复数规则：在某些语言中，您有多个one 和other。 例如在 ru 中有以下复数规则：one、few、many 和 other< /代码>。 查看官方 Unicode CLDR 文档。

Contribute

让我们让 React Intl 和 FormatJS 变得更好！ 如果您有兴趣提供帮助，欢迎并感谢所有贡献。 React Intl 只是构成 FormatJS 套件套件 的众多套件之一，您可以为其中的任何/所有套件做出贡献，包括格式化 JS 网站本身。

查看贡献文档了解详细信息。 谢谢！

License

本软件在 Yahoo Inc. BSD 许可下可免费使用。 请参阅许可文件以获取许可文本和版权信息。