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

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文檔說必須復制靜態方法 ：

但是，將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)));

學分 。

Answer 2

在使用injectIntl之前，您應該首先使用<IntlProvider>包裝您的Root / App組件。

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

這是react-intl文檔所說的：

創建一個I18n上下文

React Intl使用提供程序模式將i18n上下文范圍限定為組件樹。 這允許在組件樹的根目錄處提供像當前語言環境這樣的配置和一組轉換的字符串/消息，並可供<Formatted*>組件使用。 這與Redux之類的Flux框架用於提供對組件樹中存儲的訪問的概念相同。

所有使用React Intl的應用程序都必須使用<IntlProvider>組件。

最常見的用法是使用<IntlProvider>包裝根React組件，並使用用戶當前的語言環境和相應的轉換后的字符串/消息對其進行配置