美文网首页
react-intl与antd结合使用

react-intl与antd结合使用

作者: 码农梦醒 | 来源:发表于2018-09-04 16:38 被阅读112次

en-US.json

{
    "dpc_search": "Document Search..."
}

zh-CN.json

{
    "dpc_search": "文档搜索..."
}
import React, {Component} from 'react';
import {
    injectIntl,
    IntlProvider,
    FormattedMessage,
} from 'react-intl';
import enUS from '../locales/en-US.json';
import zhCN from '../locales/zh-CN.json';

import {LocaleProvider,DatePicker} from 'antd'
import zh from 'antd/lib/locale-provider/zh_CN';
import en from 'antd/lib/locale-provider/en_US';


class Demo extends Component {

    render() {
        const intl = this.props.intl;
        return (
            <div>{intl.formatMessage({id: 'dpc_search'})}</div>
        )
    }
}

// const I18nDemo = injectIntl(Demo);// 这句代码可以放在这里

export default () => {
    const I18nDemo = injectIntl(Demo);// 这句代码也可以放在这里, 但就是不能直接放在 return中作为jsx直接输出
    return (
        <IntlProvider locale='en' messages={zhCN}>
            <LocaleProvider locale={en}>
                <div>
                    <FormattedMessage id="USER_MGR" defaultMessage="用户管理"/>
                    <I18nDemo/>
                    <DatePicker  />
                </div>
            </LocaleProvider>
        </IntlProvider>
    )
}

相关文章

网友评论

      本文标题:react-intl与antd结合使用

      本文链接:https://www.haomeiwen.com/subject/hsfnwftx.html