Question

我们一直在使用react，react router和redux。现在我们要添加injectIntl。我的语法有问题，希望你能提供帮助。

import React, { Fragment } from 'react';
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import { intlShape, injectIntl } from 'react-intl';

...

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(MyComponent));

我将其改为

export default injectIntl(withRouter(connect(mapStateToProps, mapDispatchToProps)(MyComponent)));

错误是

警告：函数作为React子函数无效。如果返回Component而不是render，则可能会发生这种情况。或许你打算调用这个函数而不是返回它。

我需要做些什么来组合所有这些框架？

Answer 1

看起来injectIntl没有提升/复制包装组件的静态，这是问题的可能原因。

Reacts docs Static Methods Must Be Copied Over：

但是，当您将HOC应用于组件时，原始组件是用容器组件包裹。这意味着新组件可以没有任何原始组件的静态方法。

您可以查看injectIntl跟踪器中的already reported issue。

有一种解决方法，而修正程序正式应用于该项目。

您可以创建injectIntl的包装器，以正确复制静态：

// utils/injectIntl.js

import { injectIntl as baseInjectIntl } from 'react-intl';
import hoistNonReactStatic from 'hoist-non-react-statics';

/**
 * A fixed injectIntl that hoists statics.
 */
export function injectIntl(WrappedComponent: Function): Function {
  const WrapperComponent = baseInjectIntl(WrappedComponent);

  hoistNonReactStatic(WrapperComponent, WrappedComponent);

  return WrapperComponent;
}

稍后在您的应用中使用它，如下所示：

import injectIntl from 'utils/injectIntl'

// ...

injectIntl(withRouter(connect(mapStateToProps, mapDispatchToProps)(MyComponent)));

Credits

Answer 2

在使用injectIntl之前，您应首先使用<IntlProvider>包装您的Root / App组件。

ReactDOM.render(
    <IntlProvider
        locale={usersLocale}
        messages={translationsForUsersLocale}
    >
        <App/>
    </IntlProvider>,
    document.getElementById('container')
);

以下是react-intl docs所说的内容：

创建I18n上下文

React Intl使用提供者模式将i18n上下文的范围限定为   组件树。这允许像当前区域设置一样配置   以及在a的根目录提供的翻译字符串/消息集   组件树，可供<Formatted*>组件使用。这个   与Redux使用的Flux框架提供的概念相同   访问组件树中的商店。

所有使用React Intl的应用都必须使用<IntlProvider>组件。

最常见的用法是用你的根React组件包装   <IntlProvider>并使用用户当前的区域设置和配置它   相应的翻译字符串/消息

如何将react，router，redux和react-intl一起使用？

2 个答案: