C.Lee C.Lee - 3 months ago 83
React JSX Question

How to retrieve a string in ReactIntl 2.0 without using FormattedMessage

Please correct me if I am wrong, FormattedMessage in ReactIntl returns a string wrapped by span tags. In ReactIntl 1.2, we have the option to use

this.getIntlMessage('key')
to get only the string part.

Here is my question: Is there an equivalent of that in ReactIntl 2.0? I am aware that the string can be obtained by using the Function-As-Child pattern in FormattedMessage as

<FormattedMessage id="placeholder">
{(formattedValue)=>(
<MyComponent ref="mycomponent" placeholder={formattedValue}/>
)}
</FormattedMessage>


However, it messes up the 'ref' in my component and I can't access to the component using
this.refs.mycomponent
any more.

Answer

Ok, there is a work around for that. I can add ReactIntl as the context in the component like this:

contextTypes: {
    intl: React.PropTypes.object.isRequired,
},

Then when trying to retrieve the string of the message and use it, for example in a placeholder, I can do this.

<MyComponent ref="mycomponent" placeholder={this.context.intl.messages.placeholder}/>
Comments