React IntlReact 组件

联合创作 · 2023-09-22 07:06

React Intl 提供了一个 React 组件和用于国际化 React Web 应用的 Mixin。它提供一个格式化日期、数字、字符串消息的描述方式。

示例代码:

var IntlMixin         = ReactIntl.IntlMixin;
var FormattedMessage  = ReactIntl.FormattedMessage;
var FormattedRelative = ReactIntl.FormattedRelative;
var PostMeta = React.createClass({
    mixins: [IntlMixin],    
    render: function () {        
       return (            
   <FormattedMessage
                message={this.getIntlMessage('post.meta')}
                num={this.props.post.comments.length}
                ago={<FormattedRelative value={this.props.post.date} />} />
        );
    }
});var post = {
    date    : 1422046290531,
    comments: [/*...*/]
};var intlData = {
    locales : ['en-US'],
    messages: {
        post: {
            meta: 'Posted {ago}, {num, plural, one{# comment} other{# comments}}'
        }
    }
};

React.render(    <PostMeta post={post} {...intlData} />,    
document.getElementById('container')
);
浏览 4
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报