Question

问题很简单，我无法相信我找不到一个简单的解决方案（没有上下文）。

我正在使用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作为props传递给每个子组件，但是在App.jsx中也未定义intl。

我不知道我的错误在哪里。

Answer 1

模块的Wiki解释了方法，但没有说明如何使用。

解决方案很简单。您必须更改React组件的导出语法，而不是this.props.intl将在组件中神奇地提供：

export default injectIntl(MyComponent); //WORKS!!!

Unfortunally：

export default class injectIntl(MyComponent) extends React.Component //DOESN'T WORK

React-Intl：在嵌套组件

1 个答案: