javascript - '(props: ITableProps) => JSX.Element' 类型的参数不能分配给类型参数 ... - React HOC

Question

我有一个装载机 HOC

特设：

const withLoader = <P extends object>(WrappedComponent: new () => React.Component<P, any>, loading: boolean) => {

    return class WithLoading extends React.Component<P, any> {
        render() {

            return (
                <div >
                    <div className={`${loading} ? 'loader' : '' "></div>
                    <WrappedComponent {...this.props} /> 
                </div>
            )
        }
    }
}

我以这种方式使用它，例如：

const TableHOC = withLoader(Table,true);

现在我的表或任何其他组件，例如，将有自己定义良好的道具接口。一切都很好打字。

但是我遇到了这个问题

Argument of type '(props: ITableProps) => JSX.Element' is not assignable to parameter of type 'new () => Component<object, any, any>'.
  Type '(props: ITableProps) => Element' provides no match for the signature 'new (): Component<object, any, any>'.ts(2345)

我该如何解决这个问题？

Answer 1

您将希望改为使用React.ComponentType该类型：

const withLoader = <P extends object>(WrappedComponent: React.ComponentType<P>, loading: boolean) => {
  // ...
}

不过请注意，如果您打算loading通过状态更改来切换 的值，则需要将其作为道具传递。这是因为每次调用withLoader以获取增强组件时，它都是一个新组件，这意味着如果您在内部执行此操作render，React 将始终卸载并重新安装该渲染组件。这也意味着增强组件内部的任何状态都将丢失。

例如：

interface WithLoadingProps {
  loading: boolean;
}

const withLoader = <P extends object>(
  WrappedComponent: React.ComponentType<P>
) => {
  return class WithLoading extends React.Component<P & WithLoadingProps, any> {
    render() {
      const { loading } = this.props;
      return (
        <div>
          <div className={loading ? "loader" : ""}>
            <WrappedComponent {...this.props} />
          </div>
        </div>
      );
    }
  };
};

样品用途：

const MyComponent = ({ text }: { text: string }) => {
  return <div>{text}</div>;
};
const MyLoadingComponent = withLoader(MyComponent);

class Foo extends React.Component<{}, { loading: boolean }> {
  render() {
    const { loading } = this.state;
    return <MyLoadingComponent loading={loading} text="foo" />;
  }
}

最重要的是，还可以考虑displayName 按照 React 文档中的说明添加- 这将增强您在使用 React 开发工具时的调试体验。

和：

没有：

interface WithLoadingProps {
  loading: boolean;
}

const getDisplayName = <P extends object>(Component: React.ComponentType<P>) =>
  Component.displayName || Component.name || "Component";

const withLoader = <P extends object>(WrappedComponent: React.ComponentType<P>) => {
  class WithLoading extends React.Component<P & WithLoadingProps, any> {
    static readonly displayName = `WithLoading(${getDisplayName(WrappedComponent)})`;

    render() {
      const { loading } = this.props;
      return (
        <div>
          <div className={loading ? "loader" : ""}>
            <WrappedComponent {...this.props} />
          </div>
        </div>
      );
    }
  }

  return WithLoading;
};