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，它可以正常工作，但是我怎样才能访问状态并调度我放入容器的动作？

更新

我创建了以下界面（为简单起见省略了模板）

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);

React打字稿扩展容器

1 个答案: