创建一个返回反应组件类的打字稿函数

Question

我需要创建一个实用函数，它将根据某些条件返回一个反应组件类（而不是实例）。所以函数的返回类型应该是泛型的（React.PureComponent）

import React from 'react';
class FooOne extends React.PureComponent {
    render(): React.ReactElement {
        return null;
    }
}
class FooTwo extends React.PureComponent {
    render(): React.ReactElement {
        return null;
    }
}
function getFooClass(condition: boolean): typeof React.PureComponent {
    return condition ? FooOne : FooTwo;
}
const SomeFooClass = getFooClass(true);
const instance: React.PureComponent = new SomeFooClass();

上面的代码倾向于工作（我仍然不明白为什么我需要使用 typeof React.PureComponent 作为 getFooClass 的返回类型，这是通过实验发现的）， 但是 typescript 会为 getFooClass 生成以下错误：

Type 'typeof FooOne' is not assignable to type 'typeof PureComponent'.
  Construct signature return types 'FooOne' and 'PureComponent<P, S>' are incompatible.
    The types of 'props' are incompatible between these types.
      Type 'Readonly<{ children?: ReactNode; }> & Readonly<{}>' is not assignable to type 'Readonly<{ children?: ReactNode; }> & Readonly<P>'.
        Type 'Readonly<{ children?: ReactNode; }> & Readonly<{}>' is not assignable to type 'Readonly<P>'.

也许这是一种打字稿错误或限制？

Answer 1

试试类似的东西

function getFooClass(condition: boolean): React.ComponentType {
   // if FooOne and FooTwo have arguments you can use React.ComponentType<TArgs>
   return condition ? FooOne : FooTwo;
}

用法应该是这样的

function render() {
    const FooEl = getFooClass(true); // PascalCase is required
    return <FooEl />
}

或者直接返回创建的实例

function getFooClass(condition: boolean): JSX.Element  {
   return condition ? <FooOne /> : <FooTwo />;
}

Answer 2

React.ReactNode 在这种情况下应该可以工作：

function getFooClass(condition: boolean): React.ReactNode {
  return condition ? FooOne : FooTwo;
}