Question

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

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

此错误不起作用

类型错误：类型'App的类型'的参数不能分配给'组件'类型的参数。类型“应用程序类型”缺少类型“组件”中的以下属性：上下文，setState，forceUpdate，渲染以及其他3个属性。 TS2345

那正确的方法是什么？

Answer 1

Component<...>类型指定React.Component的实例。

如果目的是提供组件本身，并且不将HOC限制为对组件进行分类，则正确的类型为ComponentType：

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

也最好使用特定的道具类型而不是any。如果应像HOC通常期望的那样将props传递给包装的组件，则也应处理this issue：

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

反应打字稿如何打字

1 个答案: