Question

采用以下示例：

export interface IBaseIconProperties {
    path: string;
}

export default class BaseIcon extends React.Component<IBaseIconProperties, any> {
    public render() {
        return (
            <SvgIcon style={{width: 32, height: 32}}>
                <path d={this.props.path} />
            </SvgIcon>
        );
    }
}

export default class Foo extends React.Component<any, any> {
    public render() {
        return <BaseIcon path="/* SVG path for Foo button goes here... */"/>;
    }
}

export default class Bar extends React.Component<any, any> {
    public render() {
        return <BaseIcon path="/* SVG path for Bar button goes here... */"/>;
    }
}

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

但还有另外一种方法吗？更好的方法？也许通过BaseIcon类为abstract的实际继承？这有可能不会让事情变得复杂吗？

Answer 1

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

export interface IBaseIconProperties {
        path: string;
    }

export default abstract class BaseIcon extends React.Component<IBaseIconProperties, any> {
        public baseRender(path:String) {
            return (
                <SvgIcon style={{width: 32, height: 32}}>
                    <path d={path} />
                </SvgIcon>
            );
        }

        //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");
    }
}

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

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

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

1 个答案: