javascript - React typescript 扩展容器

Question

我正在尝试创建一个基类，将其包装在一个容器中，然后在我的其他组件中扩展它。

这是一个简化的示例:

let state = new State();
class Base extends React.Component<{}, {}> {

}

const Container = state.connect(
    () => {
        return {

        }
    },
    () => {
        return {

        }
    }
)(Base);

class S extends Container {

}

但是，这会返回错误:

`error TS2507: Type 'any' is not a constructor function type.`. 

如果我直接扩展Base，它工作得很好，但是我如何访问我放入容器中的状态和分派(dispatch)操作？

更新

我创建了以下界面(为了简单起见，省略了模板)

interface IState {
    connect: (
        mapStateToProps: () => any,
        mapDispatchToProps: () => any,
    ) => (component: typeof React.Component) => typeof React.Component
} 

let state: IState = new State();

现在类扩展不会引发任何错误。然而，原始的Base类永远不会被调用!仅调用 Connect 方法的构造函数。

这里的想法是，我将有一个抽象组件和容器(所有调度操作都在容器上)。然后我可以从其他类扩展这个组件。但是，由于容器包含所有调度操作，因此我需要扩展容器，而不是组件。

Answer 1

我认为您可以重用state.connect()返回的值。

let state = new State();
class Base extends React.Component<{}, {}> {
}

class S extends Base {
}

const containerFactory = state.connect(
    () => {
        return {}
    },
    () => {
        return {}
    }
);

const BaseContainer = containerFactory(Base);
const SContainer = containerFactory(S);