在TypeScript中为React组件进行继承的正确方法是什么？

请看以下示例:

export interface IBaseIconProperties {
    path: string;
}

export default class BaseIcon extends React.Component {
    public render() {
        return (
            
                
            
        );
    }
}

export default class Foo extends React.Component {
    public render() {
        return ;
    }
}

export default class Bar extends React.Component {
    public render() {
        return ;
    }
}

这是使用React组件继承的一种方法.不确定是否可以调用此继承.

但还有另一种方式吗？更好的方法？也许通过实际的继承来BaseIcon上课abstract？这有可能在某种程度上没有过于复杂的事情吗？

创建基类abstract并从子类扩展它没有任何问题.以下是您为示例所做的事情:

export interface IBaseIconProperties {
        path: string;
    }

export default abstract class BaseIcon extends React.Component {
        public baseRender(path:String) {
            return (
                
                    
                
            );
        }

        //put other useful base class methods here
    }

export default Foo extends BaseIcon {
    public render() {
       return this.baseRender("FooPath");
    }
}

export default Bar extends BaseIcon {
    constructor(props: IBaseIconProperties) {
      super(props);
      this.state = {
          //initialize state here, respecting the state type of the base class
      };
    }

    public render() {
       return this.baseRender("BarPath");
    }
}

我们在项目中做了一些非常相似的事情并且工作得很好(尽管我们只有简单的案例).

缺点是您不能轻易地为子类声明不同的状态和属性类型,这可能是一个限制.