menu
more_vert

[React Intl] Render Content with Markup Using react-intl FormattedHTMLMessage

作者:dayu

In this lesson, we’ll use thereact-intlFormattedHTMLMessagecomponent to display text with dynamic values along with other HTML elements to create emphasis on a piece of text.

Note:FormattedHTMLMessageshould be used sparingly becausereact-intlcannot intelligently update the component by re-rendering only pieces that have changed. Instead, it has to re-render the entire component. If possible, use aFormattedMessagecomponent instead, and wrap that component with HTML markup.

For example we have the translation data as such:

  ‘en-US‘: {
    detail: {
      window: ‘<small><em>All {numMerchants} links open in a new window.</em></small>‘,
    }
}

It is a embbed HTML.

To use it we need to import ‘FormattedHTMLMessage‘:

<FormattedHTMLMessage id="detail.window" values={{numMerchants: book.merchants.length}} />

[React Intl] Render Content with Markup Using react-intl FormattedHTMLMessage

原文地址:http://www.cnblogs.com/Answer1215/p/7252346.html