Tome el siguiente ejemplo:
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... */"/>; } }Esta es una forma en que se puede hacer la herencia con los componentes de React. Sin embargo, no estoy seguro de si se puede llamar a esto herencia.
¿Pero hay otra manera? ¿Una mejor manera? ¿Quizás a través de la herencia real donde la clase BaseIcon es abstract ? ¿Es esto posible de alguna manera sin complicar demasiado las cosas?
No hay nada de malo en hacer que la clase base sea abstract y extenderla desde las subclases. Esto es lo que puedes hacer para el ejemplo que diste:
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"); } }Hacemos algo muy similar en nuestro proyecto y funciona bastante bien (aunque solo tenemos casos simples).
La desventaja es que no puede declarar fácilmente diferentes tipos de estado y propiedades para las subclases, lo que puede ser una limitación.