oop – 在TypeScript中扩展React组件

发布时间：2020-12-15 20:52:24 所属栏目：百科来源：网络整理

导读：我在使用React.js与TypeScript.有没有办法创建继承自其他组件的React组件,但是还有一些额外的道具/状态？我想要实现的是这样的： interface BaseStates { a: number;}class GenericBaseS extends BaseStates extends React.Componentvoid,S { protected get

我在使用React.js与TypeScript.有没有办法创建继承自其他组件的React组件,但是还有一些额外的道具/状态？

我想要实现的是这样的：

interface BaseStates {
    a: number;
}

class GenericBase<S extends BaseStates> extends React.Component<void,S> {
    protected getBaseInitialState(): BaseStates {
        return { a: 3 };
    }
}

class Base extends GenericBase<BaseStates> {
    getInitialState(): BaseStates {
        return super.getBaseInitialState();
    }
}

interface DerivedStates extends BaseStates {
    b: number;
}

class Derived extends GenericBase<DerivedStates> {
    getInitialState(): DerivedStates {
        var initialStates = super.getBaseInitialState() as DerivedStates; // unsafe??
        initialStates.b = 4;
        return initialStates
    }
}

但是,如果我在Derived中调用this.setState,则会失败,我得到一个TypeScript错误(DerivedStates类型的参数不能分配给类型S).我想这不是一个特定于TypeScript的东西,而是将继承与泛型(？)进行混合的一般限制.有没有类型安全的解决方法？

UPDATE

我解决的解决方案(根据David Sherret的答案)：

interface BaseStates {
    a: number;
}

class GenericBase<S extends BaseStates> extends React.Component<void,S> {
    constructor() {
        super();
        this.state = this.getInitialState();
    }

    getInitialState(): S {
        return { a: 3 } as S;
    }

    update() {
        this.setState({ a: 7 } as S);
    }
}

interface DerivedStates extends BaseStates {
    b: number;
}

class Derived extends GenericBase<DerivedStates> {
    getInitialState(): DerivedStates {
        var initialStates = super.getInitialState();
        initialStates.b = 4;
        return initialStates;
    }

    update() {
        this.setState({ a: 7,b: 4 });
    }
}

您可以通过使用类型断言在派生中一次只设置状态的几个属性：

this.setState({ b: 4 } as DerivedStates); // do this
this.setState({ a: 7 } as DerivedStates); // or this
this.setState({ a: 7,b: 4 });            // or this

顺便说一句,没有必要为getInitialState有不同的名字…你可以做：

class GenericBase<S extends BaseStates> extends React.Component<void,S> {
    constructor() {
        super();        
        this.state = this.getInitialState();
    }

    protected getInitialState() {
        return { a: 3 } as BaseStates as S;
    }
}

class Derived extends GenericBase<DerivedStates> {
    getInitialState() {
        var initialStates = super.getInitialState();
        initialStates.b = 4;
        return initialStates;
    }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!