Reactjs 将泛型传递给封装在HOC中的组件

我有一个ApolloGraphQL查询组件的实现

使用Apollo客户端查询组件时，可以按如下方式传递键入：

import * as ApolloTypes from './__generated__/GetSubreddit';

 <Query<ApolloTypes.GetSubreddit, ApolloTypes.GetSubredditVariables>
      query={GET_SUBREDDIT}
      variables={{ name: selectedSubreddit }}
    >
...
</Query>

---

我可以想出两种方法，你可以做到这一点：

:

在您的情况下，这可能有点特别棘手，但类似的东西可能会工作，只要HOC不需要任何道具。如果是这样的话，你就必须改变你正在铸造的类型

export default connect(
  mapStateToProps,
  {}
)(GraphqlQuery) as typeof GraphqlQuery

工厂

export const createGraphqlQuery=（）=>{
const GraphqlQuery=（props:PropsType）=>{
const{query，variables，children，user，…rest}=props；
如果（！user）返回null；
返回(
...
);
};
常量MapStateTops=（{user}:{user:IUserState}）=>({
用户，
});
返回连接(
MapStateTops，
{}
)（图形查询）
};

用法：

const GraphqlQuery = createGraphqlQuery<{}, {}>();

<GraphqlQuery ... />

const GraphqlQuery=createGraphqlQuery（）；

每种方法都有一定的权衡

export const createGraphqlQuery = <T, TVariables = OperationVariables>() => {
  const GraphqlQuery = (props: PropsType) => {
    const { query, variables, children, user, ...rest } = props;
    if (!user) return null;

    return (
      <Query<T, TVariables>
        query={query}
        variables={variables}
        context={{
          headers: {
            "X-User-Id": user.id,
          },
        }}
        {...rest}
      >
      ...
      </Query>
    );
  };


  const mapStateToProps = ({ user }: { user: IUserState }) => ({
    user,
  });
  return connect(
    mapStateToProps,
    {}
  )(GraphqlQuery)
};

const GraphqlQuery = createGraphqlQuery<{}, {}>();

<GraphqlQuery ... />