如果我错了，请纠正我，ReactIntl 中的 FormattedMessage 返回一个由 span 标签包裹的字符串。在 ReactIntl 1.2 中，我们可以选择使用this.getIntlMessage('key')仅获取字符串部分。
这是我的问题：在 ReactIntl 2.0 中是否有等价物？我知道可以通过在 FormattedMessage 中使用 Function-As-Child 模式来获取字符串
<FormattedMessage id="placeholder">
{(formattedValue)=>(
<MyComponent ref="mycomponent" placeholder={formattedValue}/>
)}
</FormattedMessage>
但是，它弄乱了我组件中的“ref”，我无法再使用该组件this.refs.mycomponent。
有一个更好的解决placeholder问题。
<FormattedMessage ...messages.placeholderIntlText>
{
(msg) => <input type="text" placeholder = {msg} />
}
</FormattedMessage>
您可以使用 react-intl 提供的 intl 对象轻松返回字符串。
这就是您如何以更简单的方式在 react 类中使用 intl 对象。
注意：Render Component（主组件）应该用 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
}
通过定义 contextTypes，它将使您能够使用作为上下文类型props的 intl 对象。有关更多详细信息，请参阅react上下文。
好的，有一个解决方法。我可以像这样在组件中添加ReactIntl作为上下文：
contextTypes: {
intl: React.PropTypes.object.isRequired,
},
然后当尝试检索消息的字符串并使用它时，例如在占位符中，我可以这样做。
<MyComponent ref="mycomponent" placeholder={this.context.intl.messages.placeholder}/>
如果您使用的是功能组件，那么您可以使用useIntl()钩子来获取intl对象并string从下面的代码片段中获取消息。
import {IntlProvider, useIntl} from 'react-intl';
export function MyFunctionalComponent() {
const intl = useIntl();
return (
<div>
<p>{intl.formatMessage({id: "MyKey"})}</p>
</div>
)
}
注意：您的父组件应该包裹在</IntlProvider>提供者周围。