Как использовать реакцию, маршрутизатор, редукс и реакцию-intl вместе? - PullRequest
Новая
       6

Как использовать реакцию, маршрутизатор, редукс и реакцию-intl вместе?

0 голосов
/ 06 июня 2018

Мы использовали реакции, маршрутизатор и редуксы.Теперь мы хотим добавить 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.Это может произойти, если вы вернете компонент вместо рендера.Или, может быть, вы хотели вызвать эту функцию, а не возвращать ее.

Что мне нужно сделать, чтобы объединить все эти фреймворки?

Ответы [ 2 ]

0 голосов
/ 06 июня 2018

Перед использованием injectIntl вы должны сначала обернуть свой Root / App-компонент с <IntlProvider>. 

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

Вот что говорит react-intl docs :

Создание контекста I18n

React Intl использует шаблон провайдера для охвата контекста i18n деревом компонентов.Это позволяет предоставлять конфигурацию, например текущую локаль и набор переведенных строк / сообщений, в корне дерева компонентов и делать их доступными для компонентов <Formatted*>.Это та же концепция, что и в средах Flux, таких как Redux, для обеспечения доступа к хранилищу в дереве компонентов.

Все приложения, использующие React Intl, должны использовать компонент <IntlProvider>.

Самое распространенное использование - это обернуть ваш корневой компонент React <IntlProvider> и настроить его в соответствии с текущим языковым стандартом пользователя и соответствующими переведенными строками / сообщениями

0 голосов
/ 06 июня 2018

Похоже, 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)));

Кредиты .

...