2016-05-17 46 views
5

Bir Tepki bileşeni alt sınıfı için çalışılıyor ve benim geçersiz kılınmış yöntemler çağrıldığını değildir: Aslındabileşenleri ve ES6 sınıfları tepki ile devralma nasıl kullanılır

class Foo extends React.Component { 
    someMethod() { ... } 

    render() { 
    return <div>{this.someMethod()}</div>; 
    } 
} 

class Bar extends Foo { 
    someMethod() { 
    // Never gets called 
    } 
} 

, ben bir <Bar /> işlemek zaman benim DOM ve hata ayıklayıcıdaki bileşene bakın, bileşen türünü 'Foo' olarak gösterir.

(Ayrıca, miras vs. bileşimi hakkında argümanlar tümüyle ilgili bilgi sahibi değilim unutmayın. Güven bana miras gerçekten benim özel kullanım durumu için doğru cevaptır, bu yüzden bu iddiayı başlamayalım.)

(Ayrıca, potansiyel yinelenen sorunu #27233491 bilmem ama orada verilen çözümler aslında benim için çalışmak görünmüyor.)

Güncelleme: Ben CodePen gösteren üzerinde Aaron'ın Örneğin @ bakınız

Bu çalışır, ancak farklı davranışlar görüyorum n benim app. Özellikle:

Ben Bar işlemek zaman geliştirici konsolunda görmek ne
class Foo extends React.Component { 
    render() { 
    console.log(this); // Always prints 'Foo...'. 
    return <div></div> 
    } 
} 

class Bar extends Foo { 
    render() { 
    console.log(this); // Always prints 'Bar...'. 
    return super.render(); 
    } 
} 

: Başka bir deyişle

> Bar { props: ...etc. } 
> Foo { props: ...etc. } 

, ilk günlüğü deyimi baskılar 'bu' türü Bar varlık ve ikinci olarak biri Foo türü olarak 'bu' yazdırır. Her ikisi de aynı render() çağrısından.

+0

'someMethod' nedir ve ne demeyi bekliyorsunuz? – loganfsmyth

+0

Bu işlem render() sırasında çağrılıyor. Örneğimi güncelleyeceğim. – Talin

+1

[Bu CodePen üzerinde çalışıyor.] (Https://codepen.io/abeall/pen/eZaVbZ) – Aaron

cevap

3

Sorun bulundu: Temel sınıfta withRouter() kullanıyordum. Bir HoC'den miras alamazsınız, tüm yöntemleri ele alırmış gibi .bind (bu) onlara çağrılmıştı.

İlgili konular