Question

我有一个基本的HOC，它位于我的一些组件周围：

import * as React from 'react';    
export const AuthRoute = () => (WrappedComponent: any) => {
  return class extends React.Component<{}, {}> {
    constructor(props: any) {
      super(props);
    }
    public render() {
      return <WrappedComponent {...this.props} />;
    }
  };
}

我希望此HOC能够访问另一个HOC-GraphQL的React Apollo客户端HOC。我已尝试在此HOC上使用Apollo客户端，但它给出了错误“ TypeError：无法设置未定义的属性'props'”。这是我的尝试：

const AuthRoute = () => (WrappedComponent: any) => {
  return class extends React.Component<{}, {}> {
    constructor(props: any) {
      super(props);
    }
    public render() {

      return <WrappedComponent {...this.props} />;
    }
  };
}

const GET_AUTH = gql`
  {
    authStatus {
      authStatus
    }
  }
`;

export default compose(graphql(GET_AUTH))(AuthRoute);

我是否在这里错过了一些简单的事情，因为我认为这行得通？还是对具有现有HOC的基于HOC的库（如Apollo）有更好的做法？

谢谢！

Answer 1

好像您刚输入错字。将默认导出更改为此：

export default compose(graphql(GET_AUTH), AuthRoute);

...它应该可以工作

将Apollo GraphQL HOC模式与现有HOC结合使用

1 个答案: