时间戳

首页 > 解决方案 > 反应打字稿如何键入一个 hoc

reactjs - 反应打字稿如何键入一个 hoc

问题描述

我想在我的全新项目中使用打字稿，但我很难输入 HOC 组件

const withClass = (Wrapped: Component<any, {}, any>, className: string) => {
  return props => (
    <div className={className}>
      <Wrapped />
    </div>
  );
};

它不适用于此错误

类型错误：“typeof App”类型的参数不可分配给“组件”类型的参数。“typeof App”类型缺少“Component”类型的以下属性：context、setState、forceUpdate、render 和另外 3 个。TS2345

那么正确的方法是什么？

标签： reactjstypescript

解决方案

Component<...>type 指定 的一个实例React.Component。

如果目的是提供组件本身并且不将 HOC 限制为类组件，那么正确的类型是ComponentType：

const withClass = (Wrapped: React.ComponentType<any>, className: string) => { ... }

最好使用特定的道具类型而不是any. 如果应该像 HOC 通常期望的那样将 props 传递给包装的组件，那么这个问题也应该得到解决：

const withClass = <P extends {}>(Wrapped: React.ComponentType<P>, className: string) => {
  return props => (
    <div className={className}>
      <Wrapped {...props as P} />
    </div>
  );
};

推荐阅读