问题
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.
回答1:
You can easily return string using intl object provided by react-intl.
this is how you use intl object inside react class in much more easier way.
note: Render Component (main component) should wrap with IntlProvider
class MySubComponent extends React.Component{
{/*....*/}
render(){
return(
<div>
<input type="text" placeholder = {this.context.intl.formatMessage({id:"your_id", defaultMessage: "your default message"})}
</div>
)
}
}
MySubComponent.contextTypes ={
intl:React.PropTypes.object.isRequired
}
By defining contextTypes it will enable you to use intl object which is a context type prop. See react context for more details.
回答2:
There is a better to solve placeholder
problem.
<FormattedMessage ...messages.placeholderIntlText>
{
(msg) => <input type="text" placeholder = {msg} />
}
</FormattedMessage>
回答3:
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}/>
回答4:
I solved this problem using React render props.
I created an npm package that implements it: http://g14n.info/react-intl-inject/
It is a component like this
import { injectIntl } from 'react-intl'
export default function reactIntlInject ({ children, ...props }) {
if (typeof children === 'function') {
return (
children(props)
)
} else {
return null
}
}
And you can use it to wrap the components that for example has props you want to translate, for example
import React, { Component } from 'react'
// Import the package I created, available on npm with MIT license....
import InjectIntl from 'react-intl-inject'
// ...or copy the code above in a file in your project and import it, somethong like
// import InjectIntl from './path/to/my/render/prop/component'
class MyComponent extends Component {
render () {
return (
<InjectIntl>
{({ intl }) => (
<button
type='submit'
value={intl.formatMessage({ id: 'enter.submit' })}
/>
)}
</InjectIntl>
)
}
}
export default injectIntl(reactIntlInject)
来源:https://stackoverflow.com/questions/35186297/how-to-retrieve-a-string-in-reactintl-2-0-without-using-formattedmessage