React-Intl:访问嵌套组件中的formatMessage
提问于 2018-02-07 16:37:04
问题很简单，我不敢相信我找不到解决方案(没有上下文)来解决像这样简单的情况。
我正在使用react-intl。我有一个带有子组件Index.jsx的App.jsx，它有一个带有CreateNewSomething.jsx的SideBar.jsx。
在每个组件中，命令
<FormattedMessage
id="new_object.fill_title"
defaultMessage='Please fill the "title" parameter'
/>多亏了App.jsx提供的<IntlProvider>，才能完美地工作
不幸的是，我不能将FormattedMessage作为组件的状态值注入。
示例：
<Input
s={6}
label={label_dash_title}
style={style_items_form}
onChange={this.onDashTitleChange}
onKeyPress={this.newDashHandleEnterKey}
error= { this.state.title_error }
/>当输入字段没有填写(是必需的)时，我想打印一条错误消息。不幸的是，我不会写：
const error_message = <FormattedMessage
id="new_dash.fill_title"
defaultMessage='Please fill the "title" parameter'
/>
this.setState({"title_error" : error_message});因为我得到的是[object Object]，但翻译后的消息中没有任何属性。
到处搜索，我发现我必须使用this.props.intl.formatMessage({id: 'new_dash.fill_title'});
但是this.props.intl是未定义的。
我已经尝试在App.jax中包含以下内容：
import {addLocaleData, IntlProvider, injectIntl, intlShape} from 'react-intl';但这并没有什么区别。
我尝试将intl作为属性传递给每个子组件，但intl在App.jsx中也没有定义。
我不知道我哪里错了。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-02-12 15:47:44
该模块的Wiki解释了该方法，但没有说明如何使用。
解决方案很简单。您必须更改React组件的导出语法，然后this.props.intl将在组件中神奇地可用：
export default injectIntl(MyComponent); //WORKS!!!不幸的是：
export default class injectIntl(MyComponent) extends React.Component //DOESN'T WORK页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48668889
复制
腾讯云开发者
