reactjs - React bileşenleri için TypeScript'te kalıtımı yapmanın doğru yolu nedir?

Aşağıdaki örneği ele alalım:

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

Bu, birinin React bileşenleri ile kalıtım yapmasının bir yoludur. Ancak bunu kalıtım olarak adlandırıp adlandıramayacağından emin değilim.

Ama başka bir yol var mı? Daha iyi bir yol? Belki de BaseIcon sınıfının abstract olduğu gerçek miras yoluyla mı? Bunu bir şekilde işleri çok karmaşıklaştırmadan yapmak mümkün mü?

Cevap #1

Temel sınıfı abstract yapmak ve alt sınıflardan onu genişletmekte yanlış bir şey yok. İşte verdiğiniz örnek için yapabilecekleriniz:

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

Projede çok benzer bir şey yapıyoruz ve oldukça iyi çalışıyor (sadece basit vakalarımız var).

Dezavantajı, alt sınıflar için farklı durum ve özellik türlerini kolayca belirleyememenizdir, bu bir sınırlama olabilir.

İlgili makaleler