Как исправить «TypeError: Невозможно вызвать класс как функцию» в компоненте React с подключением

Question

Hy all,

У меня есть один компонент (Home.jsx), который отображает страницу, и он обрабатывает языковой перевод с помощью пакета под названием withLocalized (реагировать-локализовать-редуцировать) .

Теперь я хочу отделить код, который обрабатывает инициализацию языка, от HOC, чтобы я мог снова использовать логику в других компонентах.

Новый HOC находится в отдельном файле с именем Localize.js

Проблема в том, что Home.jsx использует connect, и когда я пытаюсь обернуть мой новый HOC (Localize) с помощью withLocalize (также HOC), я получаю:

Ошибка типа: невозможно вызвать класс как функцию```, когда я пытаюсь обернуть React HOC с помощью Connect HOC.

Мне удалось понять, что это работает, если я импортирую withLocalize в мой компонент Home.jsx, но если я правильно понял, я хочу, чтобы файл Localize.js содержал всю логику, связанную к языковым расчетам.

Итак, вот компонент Home.jsx:

import React, { Component } from 'react';

import Footer from 'components/Footer/V2/Footer';

import { connect } from 'react-redux';
import * as actions from '../../store/actions/auth';
import { Localize } from 'texts/localize';
import { withLocalize } from 'react-localize-redux';

class Home extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <Footer />
  }
}

const mapStateToProps = state => {
  return {
    x: state.x,
    y: state.y,
    lang: state.lang
  };
};

const mapDispatchToProps = dispatch => {
  return {
    onTest: (x, y) => dispatch(actions.authIp(x, y)),
  };
};

export default connect(mapStateToProps,
  mapDispatchToProps)(withLocalize(Localize(Home)));

Вот локализация HOC из localize.js :

import React, { Component } from 'react';
import { renderToStaticMarkup } from 'react-dom/server';

import * as trans from '@trans/index';

export const Localize = WrappedComponent => {
  return class Localize extends Component {
    constructor(props) {
      super(props);
      const init = {
        languages: [
          { name: 'English', code: 'en' },
          { name: 'Chinese', code: 'cn' },
          { name: 'Korean', code: 'kr' }
        ],
        options: {
          renderToStaticMarkup,
          renderInnerHtml: true,
          defaultLanguage: 'en'
        }
      };

      this.props.initialize({
        languages: init.languages,
        options: init.options
      });

      this.props.addTranslationForLanguage(trans.en, 'en');
      this.props.addTranslationForLanguage(trans.cn, 'cn');
      this.props.addTranslationForLanguage(trans.kr, 'kr');
    }

    componentDidMount() {
      this.props.setActiveLanguage(this.props.lang);
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
};

export default Localize;

Этот компонент обрабатывает перевод, и я пытаюсь сделать withLocalize , чтобы обернуть ppHOC, а затем сопоставить

что я делаю не так? Я ожидаю, что компонент Localize будет содержать всю логику, связанную с языками, и что экспорт будет выглядеть примерно так:

export default connect(mapStateToProps,
  mapDispatchToProps)(Localize(Home));

вместо:

export default connect(mapStateToProps,
  mapDispatchToProps)(withLocalize(Localize(Home)));