React-intl 实现多语言的示例代码(2)


import zhCN from './locale/zh.js';  //导入 i18n 配置文件
import enUS from './locale/en.js';

addLocaleData([...en, ...zh]);

export default class Root extends Component {
  static propTypes = {
    store: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired
  }

  render() {
    const { store , history } = this.props;
    return (
      <IntlProvider locale='zh' messages={zhCN}>
        <Provider store={store}>
          <Router history={history}>
          </Router>
        </Provider>
      </IntlProvider>
    )
  }
}

5.使用<FormattedMessage />

基础用法

<FormattedMessage 
  id="intl.hello"
  defaultMessage={'hello'}
/>

如果当前语言环境是 中文,它会显示你好 ,如果是英文环境,会显示Hello.

动态传值

<FormattedMessage
  id="intl.name"
  values={{name: <b>{name}</b>}}
/>

我们定义 intl.name 的时候模板里用到了{name} ,这个代表我们可以动态传值,我们可以通过FormattedMessage中的 values 属性传一个JSON对象,这是就会动态显示我们的内容了。

6.其它组件用法

Ract-intl 为我们提供了丰富的组件,可以帮我们很好的处理字符串,时间,日期 ,大家可以自己查看 API,如有不明白的地方,我可以留言。

API用法

有时候我们可能需要在代码中动态做 国际化,这就需要动态API 了。下面我简单介绍下怎么用

1.导入 injectIntl

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

2.在组件中注入

export default connect(mapStateToProps,mapActionCreators)(injectIntl(App))

我在项目中用到了Redux,注入的时候应该向上面那样,如果你没有用Redux ,只需要 export defuault injectIntl(App)

3.使用 intl 对象

我们通过第二步的注入,现在在我们在 组件的 props 上会得到一个 intl 对象,它提供的方法和咱们上边介绍的组件基本相对应,这时候我们想要显示字符串,可以使用formatMessage 方法:

const {intl} = this.props;
  
let tmp = intl.formatMessage({id: 'intl.name'},{name: 'joe'});

formatMessage的第一个参数可以传入Id, 第二个参数传入 values ,更详细的了解,请查看API

结束语

教程的代码,我已放到github 上,大家如果需要,自行查看 React-intl

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持黑区网络。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/1149.html