时间戳

首页 > 解决方案 > 将泛型传递给封装在 HOC 中的组件

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

问题描述

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

使用 Apollo 客户端查询组件时，可以这样传递类型：

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

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

我有自己的组件，它实现了 Apollo Query 组件。除其他外，它为每个查询添加了一些标题。我希望能够以与普通查询组件相同的方式传递它的类型，这很容易在没有connect来自“react-redux”的高阶组件的情况下完成。我不知道如何通过 HOC 传递泛型。有什么建议吗？

const GraphqlQuery = <T, TVariables = OperationVariables>(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,
});
export default connect(
  mapStateToProps,
  {}
)(GraphqlQuery);

标签： reactjstypescriptgenericshigher-order-functions

解决方案

我可以想到有 2 个选项可以实现这一目标：

  1. 铸造出口：

在您的情况下，这可能会有些棘手，但只要 HOC 不需要任何道具，这样的事情就可以工作。如果是这样，您将不得不更改您要转换为的类型。

export default connect(
  mapStateToProps,
  {}
)(GraphqlQuery) as typeof GraphqlQuery
  1. 工厂
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 ... />

每个人肯定都有权衡。

推荐阅读