Question

我要编写一个类似于HOC的函数，以便为React Component添加一个“可见”道具。当可见道具设置为false时，render函数只是return null，必须保持状态。

我已经写了一个JavaScript版本，但是仍然不能用TypeScript重写它，因为我找不到一种向超级React组件添加道具的方法。

遵循我的尝试：

import React from "react";

interface IVisibleProps {
  /** @default true */
  visible?: boolean;
}

const withVisible = <P>(Component: React.ComponentClass<P>): React.ComponentClass<P & IVisibleProps> => (
  class VisibleComponent extends Component {
    public static defaultProps = { visible: true, ...Component.defaultProps };
    public static displayName = Component.displayName || Component.name;

    public render() {
      return this.props.visible ? super.render() : null;
    }
  }
);

export default withVisible;

我仍然找不到通过打字检查的方法。特别是如何将IVisibleProps添加到返回的组件的通用P中。

Answer 1

一些奇怪的解决方法：

function withVisible<P>(
  Component: React.ComponentClass<P>
): ComponentClass<P & IVisibleProps> {
  return class VisibleComponent extends Component {
    public static defaultProps: Partial<P & IVisibleProps> = {
      visible: true,
      ...Component.defaultProps!
    };
    public static displayName = Component.displayName || Component.name;
    public readonly props!: Readonly<P & IVisibleProps>;
    public render() {
      return this.props.visible ? super.render() : null;
    }
  };

public readonly props!: Readonly<P & IVisibleProps>;让我们扩展道具。

...Component.defaultProps!实际上是一个肮脏的hack：defaultProps可以是未定义的，在这种情况下，{...Component.defaultProps}具有空的{}签名，不需要套件Partial<P>通过界面。这就是为什么它不起作用的原因，但是它只是打字错误，没有什么可担心的，因此我们可以使用!

来绕过检查

如何在TypeScript中向超级React组件添加道具？

1 个答案: