Question

我试图在返回反应类

的装饰器上调用connect

const SetLanguageFromPage = () => {
  return WrappedComponent =>
    class setLang extends React.Component {
      static propTypes = {
        pathContext: PropTypes.shape({
          language: PropTypes.string.isRequired
        })
      };

      componentDidMount() {
        const currentLanguage = i18n.language;
        const pageLanguage = this.props.pathContext.language;

        // First request
        if (!currentLanguage) {
          i18n.language = pageLanguage;
        }

        // Only update on language change
        if (currentLanguage !== pageLanguage) {
          i18n.changeLanguage(pageLanguage);
        }
      }

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

const mapStateToProps = (state) => { return{...} }
const mapDispatchToProps = (dis) => { return{...} }

export default connect(...)(SetLanguageFromPage);

但是当我在另一个反应类上使用装饰器时，我得到了这个错误......

Uncaught TypeError: Cannot call a class as a function

我认为是connect将我的功能改为反应类。有没有办法完成我想做的事情？我真的希望能够调用动作来设置这个装饰器中的状态，但是我看不出如何通过store调用dispatch或将调度映射到道具...

我正在使用https://www.gatsbyjs.org/，所以一般方法以我无法直接访问的方式实例化商店

Answer 1

你得到一个错误，因为你试图传递和HOC连接，而它期望一个React组件。您可以将返回的组件连接到HOC内，这是您基本上想要做的事情

const SetLanguageFromPage = () => {
  return WrappedComponent => {
    class SetLang extends React.Component {
      static propTypes = {
        pathContext: PropTypes.shape({
          language: PropTypes.string.isRequired
        })
      };

      componentDidMount() {
        const currentLanguage = i18n.language;
        const pageLanguage = this.props.pathContext.language;

        // First request
        if (!currentLanguage) {
          i18n.language = pageLanguage;
        }

        // Only update on language change
        if (currentLanguage !== pageLanguage) {
          i18n.changeLanguage(pageLanguage);
        }
      }

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

    };
    return connect(mapStateToProps, mapDispatchToProps)(SetLang);
   }
};

const mapStateToProps = (state) => { return{...} }
const mapDispatchToProps = (dis) => { return{...} }

export default SetLanguageFromPage;

在装饰器上调用redux connect？

1 个答案: