在TS的功能HOC中，道具应该有什么类型

Question

我编写函数HOC来在组件中添加查询。HOC必须接受功能组件和类别组件。

我写这个代码：

const LISTS_QUERY = gql`
query List {
list {
id
address
name
}
}
`;

interface WithListQueryProps {
listQueryResult: QueryResult<ListQuery>;
}

type WithList =
<T extends WithListProps, S extends {}>(Component: React.FC<T> | React.ComponentClass<T, S>)
=> (props: any)
=> JSX.Element;

export const withList: WithList = (Component) => {
return props => (
<Query<ListQuery>
query={LISTS_QUERY}
>
{listQueryResult => (
<Component
{...props}
listQueryResult={listQueryResult}
/>
)}
</Query>
);
};

这个HOC称之为

interface Props {
userName: string;
}
export const MenuConnect: React.FC<Props> = (props: Props) => {
const MenuBehaviourWithList = withList(MenuBehaviour);
return (
<MenuBehaviourWithList {...props}/>
);
};

HOC起了作用。我不喜欢any。需要将HOC中类型WithList中的类型props从any更改为您的。

Answer 1

在函数内部写入类型。将调用切换为命令。

export const withList = <P extends WithListProps, S extends {}>(
Component: React.FC<P> | React.ComponentClass<P, S>,
) => {
return (props: React.PropsWithChildren<Omit<P, 'listQueryResult'>>): JSX.Element => (
<Query<GetListQuery, GetListQueryVariables> query={LIST_QUERY} >
{listQueryResult => (
React.createElement(Component, { ...props, listQueryResult } as P)
)}
</Query>
);
};