Reactjs Typescript无状态HOC react redux注入道具类型

我进入了typescript，我似乎不知道如何正确地键入无状态组件，这些组件都有一个redux HOC，它向它们注入了一些道具和函数

这是我的

wrapper.tsx

export type Props = ReturnType<typeof mapStateToProps> &
  ReturnType<typeof mapDispatchToProps> & {
    fetchMorePosts: () => void;
  };

const withPostFeedWrapper = <WrapperProps extends Props>(
  WrappedComponent: React.FunctionComponent<WrapperProps>
) => {
  const PostFeed: React.FunctionComponent<Props> = (props) => {
    const { postFeed, fetchPostFeed } = props;

    useEffect(() => {
      fetchPostFeed({
        offset: postFeed.offset,
        limit: postFeed.limit,
      });
    }, [fetchPostFeed])

    const fetchMorePosts = useCallback(() => {
      ...do stuff
    }, []);

    return (
      <WrappedComponent
        {...props as WrapperProps}
        fetchMorePosts={fetchMorePosts}
      />
    );
  };

  return connect<
    ReturnType<typeof mapStateToProps>,
    ReturnType<typeof mapDispatchToProps>,
    Props,
    State
  >(
    mapStateToProps,
    mapDispatchToProps
  )(PostFeed);
};

const mapStateToProps = (state: State) => ({
  postFeed: state.postFeed,
});

const mapDispatchToProps = (dispatch: ThunkDispatch<{}, {}, AnyAction>) => {
  return {
    fetchPostFeed: (variables: FetchPostFeedPostsVariables) =>
      dispatch(fetchPostFeed(variables)),
    dispatch,
  };
};

export default withPostFeedWrapper;

导出类型Props=ReturnType&
返回类型&{
fetchMorePosts:（）=>void；
};
带有PostFeedWrapper的常量=(
WrappedComponent:React.FunctionComponent
) => {
const PostFeed:React.FunctionComponent=（道具）=>{
const{postFeed，fetchPostFeed}=props；
useffect（（）=>{
回帖({
偏移量：postFeed.offset，
限制：postFeed.limit，
});
}，[fetchPostFeed]）
const fetchMorePosts=useCallback（（）=>{
…做事
}, []);
返回(
);
};
返回连接<
返回类型，
返回类型，
道具，
陈述
>(
MapStateTops，
mapDispatchToProps
)（后期馈送）；
};
常量mapStateToProps=（状态：state）=>({
postFeed:state.postFeed，
});
const mapDispatchToProps=（调度：ThunkDispatch）=>{
返回{
fetchPostFeed：（变量：FetchPostFeedPostsVariables）=>
分派（fetchPostFeed（变量）），
派遣，
};
};
使用PostFeedWrapper导出默认值；

这是我的子组件

import withPostFeedWrapper, { Props } from "./wrapper";

const PostFeed: React.FunctionComponent<Props> = ({
  postFeed,
  fetchMorePosts,
}) => {
  return (
    <>
      ...stuff
    </>
  );
};

export default withPostFeedWrapper(PostFeed)

const withPostFeedWrapper = <WrapperProps extends Props>(
  WrappedComponent: React.FunctionComponent<WrapperProps>
) => {
  const PostFeed: React.FunctionComponent<Omit<Props, 'fetchMorePosts'>> = (props) => {
    const { postFeed, fetchPostFeed } = props;

    useEffect(() => {
      fetchPostFeed({
        offset: postFeed.offset,
        limit: postFeed.limit,
      });
    }, [fetchPostFeed])

    const fetchMorePosts = useCallback(() => {

    }, []);

    return (
      <WrappedComponent
        {...props as WrapperProps}
        fetchMorePosts={fetchMorePosts}
      />
    );
  };

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

import with postfeedwrapper，{Props}来自“/wrapper”；
const PostFeed:React.FunctionComponent=({
postFeed，
获取更多帖子，
}) => {
返回(
东西
);
};
使用PostFeedWrapper导出默认值（PostFeed）

当我这样导入它时，它会出错

import PostFeed from "containers/_post-feed";

const Homepage: React.FunctionComponent<HomepageProps> = ({
  ...props
}) => {

  return (
    <div className="homepage">
      <PostFeed />
    </div>
  );
};

从“containers/\u post-feed”导入PostFeed；
常量主页：React.FunctionComponent=({
…道具
}) => {
返回(
);
};

这里是错误

import PostFeed
Property 'fetchMorePosts' is missing in type '{}' but required in type 'Pick<Props, "fetchMorePosts">'.ts(2741)
wrapper.tsx(21, 5): 'fetchMorePosts' is declared here.

importpostfeed
类型“{}”中缺少属性“fetchMorePosts”，但类型“Pick.ts”中需要属性“fetchMorePosts”（2741）
tsx（21，5）：'fetchMorePosts'在这里声明。

按照组件的工作方式，在将其导入另一个文件时，我不需要传入

道具。特设委员会应该处理这一问题。这段代码运行正常，只有typescript出错

我遗漏了什么？
由于您包装的组件不需要传入
fetchMorePosts
，您应该将其键入
React.FunctionComponent
（该组件需要与
props
中的道具相同，只是不需要
'fetchMorePosts'
）

此外，您还可以省略
connect
中的显式类型参数，推理将很好地工作（并且您传入的类型参数是错误的，
TOwnProps
类型参数将添加到结果组件所需的props中）

const with PostFeedWrapper=(
WrappedComponent:React.FunctionComponent
) => {
const PostFeed:React.FunctionComponent=（道具）=>{
const{postFeed，fetchPostFeed}=props；
useffect（（）=>{
回帖({
偏移量：postFeed.offset，
限制：postFeed.limit，
});
}，[fetchPostFeed]）
const fetchMorePosts=useCallback（（）=>{
}, []);
返回(
);
};
返回连接(
MapStateTops，
mapDispatchToProps
)（后期馈送）；
};

由于您包装的组件不需要传入
fetchMorePosts
，您应该将其键入
React.FunctionComponent
（该组件需要与
props
中的道具相同，只是不需要
'fetchMorePosts'
）

此外，您还可以省略
connect
中的显式类型参数，推理将很好地工作（并且您传入的类型参数是错误的，
TOwnProps
类型参数将添加到结果组件所需的props中）

const with PostFeedWrapper=(
WrappedComponent:React.FunctionComponent
) => {
const PostFeed:React.FunctionComponent=（道具）=>{
const{postFeed，fetchPostFeed}=props；
useffect（（）=>{
回帖({
偏移量：postFeed.offset，
限制：postFeed.limit，
});
}，[fetchPostFeed]）
const fetchMorePosts=useCallback（（）=>{
}, []);
返回(
);
};
返回连接(
MapStateTops，
mapDispatchToProps
)（后期馈送）；
};

这就解决了问题，谢谢！关于在
connect
中推断修复它的类型，这一点很好，谢谢！在
connect