Reactjs 如何同时使用react、router、redux和react intl？

我们一直在使用react、react路由器和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)));

错误是

警告：函数作为子函数无效。如果返回组件而不是从渲染返回组件，则可能会发生这种情况。或者你是想调用这个函数而不是返回它

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

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

他说：

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

您可以在injectIntl跟踪器中检查

有一个变通办法，而修复程序正式应用于项目

您可以创建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)));

.

在使用injectIntl之前，您应该首先将根/应用程序组件包装为

下面是报告的内容：

创建I18n上下文

React Intl使用提供程序模式将i18n上下文范围限定为 组件树。这允许类似于当前语言环境的配置 以及一组翻译后的字符串/消息，这些字符串/消息将在 组件树，并可用于组件。这 与Redux等通量框架提供的概念相同 访问组件树中的存储

所有使用React Intl的应用程序都必须使用该组件

最常见的用法是使用 并使用用户的当前区域设置和 对应的翻译字符串/消息

---

我尝试了一下，得到了相同的错误消息。现在我看到react intl docs说您必须使用provider组件。给你。您可以尝试一下，请告诉我它是否有效。因此，在使用injectIntl之前，您应该首先用包装您的根/应用程序组件。这说明了必须使用。问题的用法可能更多地与MyComponent有关，而不是同时使用所有这些依赖项。MyComponent看起来像什么？Redux也有一个提供程序

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