提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

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

React to use Component order format higher messages
2023-09-14 08:59:18 时间

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);

 

相关文章