Question

您好我使用typescript + react，我希望有一个基类，并且有几个组件从基类继承。

import * as React from "react";

interface IBaseProps {
    title: string;
}

class Base<P extends IBaseProps, S> extends React.Component<P, S> {
    public props: IBaseProps;

    public render() {
        return (
            <h1> Generic Class {this.props.title} </h1>
        );
    }
}

interface IChildProps extends IBaseProps {
    message: string;
}

class Child extends React.Component<IChildProps, undefined> {

    public render() {
        return (
            <h1> Child Class {this.props.title} {this.props.message} </h1>
        );
    }
}

但是在编译时会抛出错误：

TS2415: Class 'Base<P, S>' incorrectly extends base class 'Component<P, S>'.
  Types of property 'props' are incompatible.
    Type 'IBaseProps' is not assignable to type 'Readonly<{ children?: ReactNode; }> & Readonly<P>'.
      Type 'IBaseProps' is not assignable to type 'Readonly<P>'.

问题不是继承，即使这让我犯了错误

export class Base<P, S> extends React.Component<P, S> {
    public props: IBaseProps;

    public render() {
        return (
            <h1> Generic Component </h1>
        );
    }
}

我正在使用打字稿v2.3.4，以防它重要

Answer 1

没有必要两次定义props成员，这足以在基类中这样做：

class Base<P extends IBaseProps, S> extends React.Component<P, S> {
    public props: IBaseProps;

    ...
}

class Child extends React.Component<IChildProps, undefined> {
    public render() {
        ...
    }
}

Child.props的类型将为IChildProps，因为这是您作为通用约束传递的内容。

但你甚至不需要在基类中定义它，因为React.Component已经为你做了，所以它应该是：

class Base<P extends IBaseProps, S> extends React.Component<P, S> {
    public render() {
        ...
    }
}

class Child extends React.Component<IChildProps, undefined> {
    public render() {
        ...
    }
}

在所有组件中，您仍然会this.props（使用正确的类型）。

修改

在原始代码中，你有这个：

class Base<P extends IBaseProps, S> extends React.Component<P, S> {
    public props: IBaseProps;
    ...
}

但React.Component的定义是：

class Component<P, S> {
    ...
    props: Readonly<{ children?: ReactNode }> & Readonly<P>;
    ...
}

这意味着您已使用不匹配的类型覆盖props成员，这就是错误所说的内容。

从react组件继承

1 个答案:

修改