[React Intl] Use a react-intl Higher Order Component to format messages

最新推荐文章于 2021-04-13 18:18:26 发布

转载最新推荐文章于 2021-04-13 18:18:26 发布 · 71 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Answer1215/p/7265695.html

文章标签：

#javascript #ViewUI

本文介绍如何利用react-intl的injectIntl高阶组件优化React应用中的字符串国际化处理过程，避免不必要的DOM元素创建，并简化props的传递。

In some cases, you might need to pass a string from your intl messages.js file as a prop to a component. Instead of using react-intl components (which generate markup), we’ll use the injectIntl higher order component provided by react-intl. This will provide just the string we’re looking for, make the prop simpler, and avoid creating unnecessary DOM elements.

We’ll also use props passed to the component from the Higher Order Component to clean up some redundant code.

import React from 'react';
import { injectIntl, FormattedMessage, FormattedHTMLMessage, FormattedRelative , FormattedTime, FormattedNumber } from 'react-intl';
import {meanBy, round, sortBy} from 'lodash';

import books from '../books.json';

const BookDetail = ({match, intl}) => {
  
  return (
    <div className="BookDetail">
     ....
      <textarea placeholder={intl.formatMessage({
        id: 'detail.inputPlaceholder'
      })} cols="30" rows="10"></textarea>
    </div>
  )
}

export default injectIntl(BookDetail);